CSS Specificity: What You May Not Have Known

Most front-end developers glaze over at the mention of the word. However, having a strong grasp of how CSS Specificity works is key to minimizing tedious debugging. Specificity tells the browser what rules to apply to an element, and if there is a conflict then the higher priority wins.

Let’s look at some simple examples, and put this concept into context.

Pop Quiz – Question #1: Rule Order

[snippet slug=class-vs-class line_numbers=false lang=html][snippet slug=class-vs-class-css line_numbers=false lang=cs]

What is the background-color of the <div> based on the example above?

If you answered blue, you are correct.

Since the declaration comes later in the CSS (near the bottom), it has a higher specificity. This is fundamentally the simplest rule of the cascade in Cascading Style Sheets (CSS). If there is a conflict in rules (e.g. background-color: blue vs background-color: red), and since the classes have the same weight, then the cascade wins.

A similar scenario is the following:

[snippet slug=css-rule-order-html line_numbers=false lang=html][snippet slug=css-rule-order-css line_numbers=false lang=cs]

Again, the same outcome, because background-color: blue comes later in the declaration block.

Ok, that was easy. Now let’s try one that’s a little harder:

Pop Quiz – Question #2: Pseudo-element vs Pseudo-class

[snippet slug=pseudo-element-vs-pseudo-class-hmtl line_numbers=false lang=html][snippet slug=pseudo-element-vs-pseudo-class-css line_numbers=false lang=cs]

What color will the text be?

This time red wins. The h1::first-line pseudo-element has higher specificity than the h1:first-child pseudo-class. Here is how we can calculate and know for sure:

Calculating Specificity

Here are the rules for calculating specificity, as outlined by W3C:

• Count the number of ID selectors in the selector (= a)
• Count the number of class selectors, attributes selectors, and pseudo-classes in the selector (= b)
• Count the number of type selectors and pseudo-elements in the selector (= c)
• Count the number of element names and pseudo-elements in the selector (= d)
• Concatenating the three numbers a-b-c (in a number system with a large base) gives the specificity.

[snippet slug=calculating-specificity-examples lang=cs]

So let’s calculate and compare the Specificity of the example (Pop Quiz – Question #2: Pseudo-element vs Pseudo-class) up above to verify our answer was correct.

[snippet slug=pseudo-element-vs-pseudo-class-calculate-specificity lang=cs]

A Few Special Rules

• Ignore the universal selector (*), as it is worth 0.
• !important overrides everything! Please avoid it at all costs.
• :not() – a negation pseudo-class adds no specificity by itself. Only what’s inside the parenthesis is added to specificity value. e.g. #s12:not(FOO) /* a=1 b=0 c=1 -> specificity = 101 */

Conclusions

Basically, only be as specific as you need to be. Being too specific mostly makes it harder to override things further down the line.

Tools & Further Reading

• “CSS Specificity: Things You Should Know” – SmashingMagazine.com
• Specificity Calculator – A visual way to understand CSS specificity.
• “Calculating a selector’s specificity” – W3.org
• CSSSpecificity.com – CSS Specificity infographic that uses The Shining to demonstrate specificity.
• “Specifics on CSS Specificity” – CSSTricks.com
• CSSDig.com – Chrome extension for analyzing any site’s CSS in a new way.