"*" is appearing top in CSS specificity, why?

Question

I'm having trouble understanding why my CSS isn't being styled according to the way I understand the specificity rules. According to my reading across the web (including this calculator), the * (matches everything) has no specificity, while an element (e.g. h1,h2, etc) has is fourth most important, while a class is third most important. But that's not what I'm seeing in the Chrome debugger.

From the looks of it, the * has come out on top, followed by the h5, then two more * matches and then a match for the class .orange. Shouldn't the * be after everything else? And shouldn't the .orange win out over the h5? What is going on?

Fruge

could you also provide some html? – Transcendentalistic

Answer 1

In your example, the * is the only selector that actually matches the element in question.

The other styles are only inherited by other element's definitions. These other elements are in a parent context with your element.

According to your screenshot, it must be some-element inside a structure like this:

<div class="row orange">
    <div class="col-xs-10">
        <h5 class="detail1">
            <some-element></some-element>

With regard to your element, inherited styles do not have any specificity at all. Specificity is a concept that applies to CSS selectors, not CSS properties.

Specificity of inherited CSS properties

Somersomers

Oh, didn't notice Inherited from ... +1 – Fukien

Oh, ok! In that case, how does inheritance work with specificity? Even in that case, div.row.orange is still the most specific rule here and it's not winning. – Fruge

With regard to your element, inherited styles do not have any specificity at all. Specificity is a concept that applies to CSS selectors, not CSS properties. #28420663 – Somersomers