5

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. enter image description here

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?

Liam
  • 27,717
  • 28
  • 128
  • 190
J-bob
  • 8,380
  • 11
  • 52
  • 85

1 Answers1

14

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

Community
  • 1
  • 1
connexo
  • 53,704
  • 14
  • 91
  • 128
  • Oh, didn't notice `Inherited from ...` +1 – Medet Tleukabiluly Aug 24 '15 at 15:24
  • 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. – J-bob Aug 24 '15 at 15:29
  • 1
    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*. http://stackoverflow.com/questions/28420163/specificity-of-inherited-css-properties – connexo Aug 24 '15 at 15:30