CODEWITHSUNDEEP
htmlcss
Berry Blue
Berry Blue

Reputation: 16482

Reset css style color property

Is it possible to define a style this way? The class child in this example is red unless it's wrapped in a parent class where I want it to reset so that it takes the color defined in the style attribute of parent.

.child {
 color: red;
}

.parent > .child {
 color: _clear_;
}

<div class="parent" style="color:blue;">
 <div class="child">Some Text</div>
</div>

Upvotes: 9

Views: 13720

Answers (2)

khakiout
khakiout

Reputation: 2400

I think color: inherit; for .parent > .child is what you are looking for:

.child {
    color: red;
}

.parent > .child {
    color: inherit;
}
<div class="parent" style="color:blue;">
    <div class="child">This will be blue</div>
</div>

<br/>

<div class="child">This will still be red</div>

JSFiddle for sample

Upvotes: 19

Anthony
Anthony

Reputation: 37065

If you are using valid selectors, like in your example, you want to use inherit:

.child {
 color: red;
}

.parent > .child {
 color: inherit;
}

However, if you were looking for something more complicated like "style the child based on the parent not having a specific attribute", that may be out of reach with pure CSS. Also, some child elements may not be able to logically inherit a style from a parent, so be sure to set the "parent" style rule on a parent that the child can inherit from and that you have in mind for the rule (so not so high up the chain that you didn't intend that color for that scenario). For instance, in the above example if the parent did not have the inline style rule, there would be no color rule, so the child would pick up a value from somewhere higher up.

Upvotes: 2

Related Questions