Css use color from inheriting color, into an other property

user_8332896 0
Viewed 108

I want to use the color my color property gets from inheriting color in my background-color property.

.myclass {
     color: "inherit";
     background-color: {{somehow get value of color from color property}};
}
css html
2 Answers

You can use

.myclass {
     color: "inherit";
     background-color: currentColor;
}
user_135448490

How about using currentColor? https://css-tricks.com/currentcolor/

An example:

#outer {
  color: red;
  
  width: 200px;
  height: 200px;
  border: 2px solid #000000;
}

#inner {
  background: currentColor;
  
  width: 100px;
  height: 100px;
  border: 2px solid #000000;
}
<div id="outer">
  <div id="inner"></div>
</div>

You can use currentColor for other properties as well (e.g. for border, box-shadow, etc.).

#outer {
  color: red;
  width: 200px;
  height: 200px;
  border: 2px solid #000000;
}

#inner {
  box-shadow: 5px 5px 5px currentColor;
  width: 100px;
  height: 100px;
  border: 2px solid #000000;
}
<div id="outer">
  <div id="inner"></div>
</div>

As a side note: If your use case is that you want to propagate some information to the children of an element, I'd suggest to also check out CSS Custom Properties, sometimes also called CSS Variables. https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

user_160583310
Related