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

Question

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!

css pseudo-class

Answer 1

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

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 3

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.

Answer 4

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.

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

Answer №1

Answer №2

Similar questions

Move your cursor over X or Y to alter the color of Y exclusively

What's the best way to add two distinct colors as background for a header with css?

Google Maps Marker disappeared upon relocation to the current application

If the text is too lengthy, enclose it within a div element

JavaScript failing to load following PHP header() redirect

I recently designed a form using a combination of HTML and JavaScript in order to display different dialogues depending on the number of selections made. Unfortunately, the alert function does not seem to be functioning

The phone number is not able to be clicked on

What could be causing my bootstrap to overlap?

Exploring Vue and Webpack's tree shaking functionality, side effects management, and its impact on CSS: Loading unused component CSS

transitioning from font-awesome v4 to the latest version, v5

IE is causing issues with the transition

When trying to show a Vue view, there was an issue with reading properties of null, specifically the 'style' property

CSS tip: Keep the bottom of the screen always visible in an overflow window

After clicking multiple times within the modal, the modal popup begins to shift towards the left side

Tips for creating fonts that adjust depending on the length of characters

The menu does not adjust to fit the site properly, causing the video/photos to appear off to the right on smaller screens

Enigmatic void appears above row upon removal of content from a single item

Enhance your existing look by incorporating element.style into your designs

Discovering more about this topic

Achieving a 100% width input with Flexbox: Tips and tricks for success