CODEWITHSUNDEEP
csscss-specificity
mboratko
mboratko

Reputation: 406

Specificity of inherited CSS properties

What is the level of CSS specificity received by inherited properties? I read through the W3 recommendation regarding CSS specificity and so I understand how to calculate the different specificities of css rules which are directly targeting the same element, but I see no mention there of the level of specificity given to inherited attributes.

In particular, the issue I'm encountering has to do with header elements, though I would be very interested to understand this in general.

For example, here's a snippet of HTML:

<h2>This should be black</h2>
<div class="all_red_text">
    <h2>This should be red</h2>
</div>

Now if I include some CSS like this:

.all_red_text { color: red; }

I will get the result I expect. On the other hand, if I the css which I included was

h2 { color: black; }
.all_red_text { color: red; }

then all the text will be black. In the first case there is some default browser CSS which is able to be overridden by the inherited property, but then when the same property is manually specified in the second example it takes precedence over the inherited property.

Upvotes: 6

Views: 2549

Answers (4)

DACrosby
DACrosby

Reputation: 11430

CSS is applied to elements in this form:

Priority 1: inline styles
Priority 2: CSS ID styles
Priority 3: CSS class/pseudo-class styles
Priority 4: CSS element styles
Priority 5: Inherited styles

So, using your HTML structure & CSS:

h2 { color: black; }
.all_red_text { color: red; }
<h2>This should be black (and is black)</h2>
<div class="all_red_text">
    (This text is indeed red.)
    <h2>This should be red (actually, its parent is red - this text is black)</h2>
</div>

The .all_red_text CSS is telling the div.all_red_text element and everything inside it to have red text. The h2 CSS is telling the h2 elements directly to have black text. When the h2 is rendered, it sees "my parent element wants me to have red text, but I'm directly being told to have black text". The same idea applies to further up parents, including the HTML and browser defaults - this allows you to, for example, set the font-family on the html element and have it apply to everything on your (well formatted) web page, unless something specifically overrides it.

If you want the h2 inside div.all_ted_text to also have red text, you'd need to tell those h2 elements directly to have red text; something like this:

.all_red_text h2 { color: red; }

CSS-Tricks has a pretty nice guide on this, although they don't currently go too deep into inherited properties.

Upvotes: 7

kaidakkodan
kaidakkodan

Reputation: 21

Two or more selectors gets engaged into Specificity War, if and only if they end up targetting the exact same element. However, If two selectors (targetting the same element) have equal specificity weight, then there are other factors like you said, inheritance or the styles getting over ridden in the css file.

Upvotes: 0

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201538

There is no such thing as specificity of inherited CSS properties. Selectors, not properties, have specificity.

In your example, both h2 elements match only one of the rules, h2 { color: black; }. Thus, the color of h2 is black (assuming there are no other style sheets that affect the rendering). Anything set on some other elements (including the parent of the second h2 element) does not affect this the least.

If the rule h2 { color: black; } is absent and there are no other rules affecting the situation, then there is no color set on either of the h2 elements. According to the definition of the color property, the value is then inherited from the parent.

Upvotes: 0

MarcinJuraszek
MarcinJuraszek

Reputation: 125620

Any declaration that matches element directly will get priority over the property that's inherited from the element's parent. Specificity has nothing to do with that.

Upvotes: 17

Related Questions