Inherit another parent CSS property

Question

I have a <div> with a certain color for text. I want a nested component to use for its background-color, the text color of the parent <div>.

<div style="color: red">
    <div style="background-color: calc(inherit(color))" />
</div>

Is this possible in CSS?

Answer 1

Yes, it is possible, use the css value currentColor.

.parent {
  color: red;
}

.child {
  width: 100px;
  height: 100px;
  background-color: currentColor;
}

<div class="parent">
    <div class="child"></div>
</div>