Specificity of inherited CSS properties

Question

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.

Syrup

Properties do not have specificities at all. – Happiness

Answer 1

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.

Disbud

And to expand, it goes element > id > class. – Concentric

@slime I think you typed that wrong - inline styles (1000) > #id (100) > .class (10) > element (1). – Akeyla

@slime not exactly, see: jsfiddle.net/kpodemski/grars8bm and see: code.tutsplus.com/tutorials/… – Seaman

I would say don't get to stuck or specific about your CSS inheritance unless you can't change your markup. I would recommend to have a look at this slides: slideshare.net/stubbornella/our-best-practices-are-killing-us. – Befuddle

There is no “direct” matching as opposite to some indirect matching, and it is a selector that matches, not a declaration. There is no issue of priority, especially not about priority of declarations over properties. The question uses very incorrect terminology, and I’m afraid this answer adds to the confusion. – Happiness

Terminology nit-picking aside, this answer is correct and helpful. Reference: developer.mozilla.org/en-US/docs/Web/CSS/… – Azal

Answer 2

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.

Lotic

Answer 3

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.

Happiness

Maybe pedantically speaking selectors have specificity rather than the properties themselves, but already there are instances where this is blurred (consider !important, which essentially adds 3 levels of specificity for a particular property on top of the four mentioned in the W3 recommendations). The take away from all these answers has been that essentially there are another four levels of specificity below the four that the W3 recommendation lists for inherited properties. – Syrup

Not only that, but since each parent element can inherit properties from its parents, this extension of specificity itself could go on ad nauseum. Of course one can also "collapse" these levels at any point, using the computed value up to that point, and this is perhaps a more useful way to think of it - 6 place values of specificity, !important taking the highest slot, four for the selectors matching the element itself (what I called "direct"), and then one at the bottom encapsulating the result of all inherited properties. – Syrup

@process91, there is no such blurring. You are confusing specificity with the cascade. Specificity plays a role there, but confusing the two guarantees that you misunderstand how the cascade works, theoretically and practically—it’s difficult enough, no need to blur it more. For example, !important has absolutely no effect on specificity. – Happiness

@process91: The takeaway from all these answers is that authors have a grave misunderstanding of the cascade as a whole. But in fairness, the CSS2.1 spec contributed partly to this confusion by using the term "specificity" to refer to the priority of inline style declarations, which aren't selectors at all. Indeed, it seems the CSS standard does not have a clear definition of "specificity", as even the level 3 Cascade module uses the term "specificity" to refer to declarations and not just selectors. – Fortissimo

Answer 4

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.

Wilhite