Specifics on CSS Specificity

I’ve never specifically covered this subject before. (rimshot!)

The best way to explain it is to start with an example of where specificity gets confusing and perhaps doesn’t behave like you would expect. Then we’ll take a closer look at how to calculate the actual specificity value to determine which selector takes precedence.Here is a simple unordered list:

Whiskey and Ginger Ale

Wheat Beer

Mint Julip

Now you want to designate one of these your favorite drink and change its styling a bit. You need a hook for this so you apply it via a class name on the list element.

class="favorite">Whiskey and Ginger Ale

Wheat Beer

Mint Julip

Now you pop open your CSS and do your styling for your new class:

.favorite {
color: red;
font-weight: bold;
} 
Then you take a look at your work, but alas, it didn’t work! The text of your favorite drink didn’t turn red or go bold! Something fishy is at work here.
 
Poking around more in the CSS, you find this:
 
ul#summer-drinks {
font-weight: normal;
font-size: 12px;
color: black;
} 
There is your trouble right there. Two different CSS selectors are telling that text what color and font-weight to be. There is only one statement for font-size, so clearly that one will take effect. These aren’t “conflicts” per-say, but the browser does need to decide which one of these statements to honor. It does so by following a standard set of specificity rules.
 
I think this confuses some beginners because they haven’t quite gotten this sorted out yet. They might think because the .favorite statement is “further down in the CSS” or because the class=”favorite” is “closer to the actual text” in the HTML that will be the one that “wins”.
 
In fact, the order of selectors in your CSS does play a role and the “further down” one does in fact win when the specificity values are exactly the same. For example:
 
.favorite {
color: red;
}
.favorite {
color: black;
}
 
The color will be black… but I digress.
 
The point here is you want to be as specific as it makes sense to be every chance you get. Even with the simple example presented above, it will become obvious to you eventually that simply using a class name to target that “favorite drink” isn’t going to cut it, or won’t be very safe even if it did work. It would have been much smart to use this:
 
ul#summer-drinks li.favorite {
color: red;
font-weight: bold;
}
 
That is what I’m calling “being as specific as it makes sense to be”. You could actually be way more specific and use something like this:
 
html body div#pagewrap ul#summer-drinks li.favorite {
color: red;
font-weight: bold;
}
 
But that is over the top. It makes your CSS harder to read and yields no real benefits.
 
Calculating CSS Specificity Value
 
But just why is that our first attempt at changing the color and font-weight failed? As we learned, it was because simply using the class name by itself had a lower specificity value and was trumped by the other selector which targeted the unordered list with the ID value. The important words in that sentence were class and ID. CSS doesn’t care what try to do with classes and IDs, but it does apply vastly different specificity weights to them. In fact, an ID holds 10x greater importance than a class.
 
Let’s take a look at how the numbers are actually calculated:
 
 
In otherwords:
 
If the element has inline styling, that automatically wins (1000 points)
For each ID value, apply 100 points
For each class value (or pseudo-class or attribute selector), apply 10 points
For each element reference, apply 1 point
 
Sample calculations