Is it possible to adjust the color of a pseudo class to align with the color of a different class?

Creating a unique 'block' element on a webpage named 'test-div' has been quite the challenge.

Adding an additional class to test-div changes the background color, such as:

test-div test-div-bg-bright-gold 
test-div test-div-bg-dark-blue

and so forth.

Within my test-div, there is also a pseudo class that cuts the top-left border, with the requirement of matching the color of the applied background class. The CSS for this pseudo class appears as follows -

test-div::before {
     content: '';
    position: absolute;
    top: 0; left: 0;
    border-top: 100px solid white;
    border-right: 100px solid var(--COLORTOMATCHTHEBGCLASSGOESHERE?);
    width: 0;
   }

The solution to this challenge has eluded me for some time now, any assistance would be immensely appreciated.

Thank you!

csspseudo-class

Answer №1

To apply different colors to the background and border of a div, you can use variables within a color modification class. By setting the value of the variable inside the class, you can then assign it to the background-color property of the div and the border of the pseudo element.

.example-div {
  width: 200px;
  height: 300px;
  position: relative;
  background: var(--background-color);
}

.example-div--green {
  --background-color: green;
}

.example-div--purple {
  --background-color: purple;
}

.example-div::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-top: 100px solid white;
  border-right: 100px solid var(--background-color);
  width: 0;
}
<div class="example-div example-div--green">
</div>

<div class="example-div example-div--purple">
</div>

Answer №2

Custom properties in CSS, also known as variables, can be inherited just like this:

.wrapper {
  --bg-color: white;
  background-color: var(--bg-color);
  padding: 8px;
  border: 1px solid gray;
  margin-block: 100px;
  position: relative;
}

.wrapper::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  border-top: 100px solid white;
  border-right: 100px solid var(--bg-color);
  width: 0;
}

.wrapper.highlight {
  --bg-color: yellow;
}
<div class="wrapper"></div>
<div class="wrapper highlight"></div>

By changing the value of the custom property, it will be inherited by all its descendants, even pseudo-elements.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Navigating the website with curtain.js and anchor tags

Currently, I am working on a website located at www.TheOneCraft.co.uk. I have incorporated the curtain.js jQuery plugin to create animated slide/pages as users scroll down. However, I have been unsuccessful in making the navigation bar follow this animati ...

javascriptjqueryhtmlcss

The linear gradient feature in asp.net does not function properly on Internet Explorer versions 6 through 8

After running the following code below, it appears that the linear gradient is not functioning properly in IE6 to IE8. background-image: linear-gradient(45deg, white 0%, gray 50%, black 100%); I attempted to resolve this issue by adding the code snippet ...

asp.netcssinternet-explorer-8linear-gradients

Fade or animate the opacity in jQuery to change the display type to something other than block

I am currently using display: table and display: table-cell to vertically align multiple divs. However, I have encountered an issue when animating the opacity with jQuery using either fadeTo() or fadeIn. The problem is that it always adds inline style di ...

javascriptjqueryhtmlcss

How to customize the appearance of an element within a shadow DOM

I am currently implementing a custom CSS style over an application without the ability to modify its code. Initially, the DOM structure looked like this: <div class="foo"> <div class="bar"></div> </div> and I ...

cssshadow-dom

Additional <li> elements are created in Internet Explorer versions 8 and 9

Currently in the process of setting up a new website/landing page. Upon heading to the right column at the bottom (where the pictures are located), you will notice <li> elements containing pictures within containers. The only issue that arises is whe ...

htmlcsshtml-lists

Incorporating Bootstrap content directories into ASP.NET website projects

I've been experimenting with Bootstrap for website design, but I'm facing an issue with adding files to my project. When creating a project in Visual Studio 2015 using File/New/Web Site..., I'm able to simply Copy/Paste the css, fonts, js fo ...

c#cssasp.netweb-applicationsbootstrap-4

Representation of a family tree in CSS showcasing multiple sub-parents (both many to one and one to many relationships)

I've come across various family tree presentations. I'm curious if it's possible to display a one-to-many and then many-to-one structure? Currently, the flow is linear stop after stop, but I'd like to incorporate multiple steps that con ...

cssfamily-tree

Bug with the animation of height in Jquery

Unfortunately, I can't share my entire source code here because it's quite lengthy. However, maybe someone can provide some insight into a common issue that may be happening elsewhere. The problem I'm facing is with a DIV element that has r ...

jqueryhtmlcssanimation

Using Angular to create a nested routerLink within a routerLink

Is there a way to dynamically change the content of a page loaded using router link without duplicating the HTML code for the header and footer sections each time? I want to navigate between different pages with routerLink and have only the main content ar ...

htmlcssangularangular-routing

Using jQuery to toggle the image of a button based on its id

I have a jQuery function that opens another section when clicking on a div with the class 'open', and changes the image of a button by switching its id for CSS. However, I now need to change the button's image back when it is clicked again. ...

jquerycss

Blocked the loading of scripts due to non-compliance with the Content Security Policy directive

Encountering an error with externally loaded scripts: Refusing to load the script 'https://code.jquery.com/jquery-3.4.1.slim.min.js' due to violating the Content Security Policy directive: "script-src 'self' https://ajax.googlea ...

javascripthtmlcsscontent-security-policy

Creating a cascading layout with React Material-UI GridList

Can the React Material-UI library's GridList component be used in a layout similar to Pinterest's cascading style? I have utilized Material-UI Card components as children for the GridList: const cards = props.items.map((item) => <Card ...

javascriptcssreactjsmaterial-ui

Increase the spacing between the dropdown menu and the first option

I am attempting to create some space between the select box and the dropdown list. An example image can be seen below: In the top example, a div was used. Despite trying padding and margins, I did not achieve the desired results. Is it impossible to do t ...

htmlcssreactjs

Tips for directing the scroll according to the current selection class

I am attempting to focus the scroll based on the selected class when clicking on the previous and next buttons. How can I achieve this functionality? Please review my code on https://jsfiddle.net/kannankds/bcszkqLu/ <ul class="kds"> <li>tile ...

javascriptjqueryhtmlcss

How can I disable the background color in Chrome autocomplete? Is there a way to make the background

There's a form on my website where the autocomplete feature shows a blue background color. The form itself has a semi-transparent white background. I managed to change the autofill color to white using this CSS property: -webkit-box-shadow: 0 ...

htmlcssgoogle-chromeautofill

Switching the background image when hovering over a list element

Looking at the screenshot, it's clear that there is an unordered list with a background image set on the div. What I am trying to achieve is to have the background image change whenever I hover over a list item. Each list item should trigger a differe ...

javascriptjqueryhtmlcss

Is there a way to determine the app bar height within a React Material UI application?

I'm trying to create a full-screen image for the opening of my website using React and Material UI. Here's a snippet of my JSX code with the default Material UI theme: <AppBar> //code in between </AppBar> <Container sx={{margin: ...

javascriptcssreactjsmaterial-ui

Could you please review my PHP code? I encountered a syntax error: unexpected '}' character. Thank you

I encountered an issue in the final line <?php } ?> as it reports a syntax error, unexpected '}' <?php if (isset($_SESSION['u_id'])) { //echo "You are logged in!"; include_once 'database.php&apo ...

phphtmlcss

How can I place text on top of an image with a filter using Bootstrap?

I am facing a challenge of overlaying text on an image with a tinted background color and opacity. While working with Bootstrap 4, I suspect that some classes might be conflicting with each other. This is my current setup: Index.cshtml: <div class=" ...

htmlcsstwitter-bootstrapbootstrap-4

Ensure portrait orientation images have a restricted width to maintain their aspect ratio

On a responsive site, I have set up flexslider to showcase both landscape and portrait orientation images. The smoothHeight: true option is enabled to adjust the height according to the images. However, at the largest media query where the flexslider cont ...

jquerycssflexslider