Jeremy Waraksa Jeremy Waraksa - 2 months ago 4x
CSS Question

Can't figure our why CSS specificity isn't working

So I have the following code:

<ul class="shopping-list" id="awesome">
<li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
ul#awesome {
color: red;
} li.favorite span {
color: blue;

According to the CSS specificity rules ( the word "Sausage" should be red, however it is appearing blue. Why?

The specificity value of "ul#awesome" = 0101
The specificity value of " li.favorite span" = 0023
So then why is the word sausage still blue?
From my understanding order of style declarations only matters if the specificity is the same for each declaration which is not the case here.


The span is inheriting the rule ul#awesome from the ul element. The rule li.favorite span directly selects the span element. Inherited rules have a specificity of 0, so any rule that selects the element itself will win.

You can test this by replacing your second rule with the basic element selector for "span", and you'll see that both Milk and Sausage are blue in that case.