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?
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With