CSS Specificity : Simplified

CSS specificity is the one thing which will keep us wrong even after we thought we understand the topic. Every time our styling doesn’t work the way we want. We come across the term CSS specificity.

The different weights for selectors may be the reasons it make it difficult to understand the specificity topics well.

When two conflicting CSS rules apply to the same element browser has some rules to decide which one is the winner and which rule to apply. CSS specificity is like the score we give for different styling arguments better the score better the chance of winning.

Let’s unfold this mystery by looking up on an example.

You got a list of fruits in you HTML

<div id="favorite-fruits">
  <ul>
    <li class="fruit-1">orange</li>
    <li>apple</li>
    <li>grapes</li>
    <li>mango</li>
  </ul>
</div>

and in css you add your styling to orange fruit.

.fruit-1{
  background-color: orange; 
}

when you run it the color remain the same, a quick inspection in browser tells us that a different style also applied to the same element and your browser decide to override you with the other one.

#favorite-fruits li {
  background-color: teal;
}

What an atrocity you wonder why your browser showing favor to the old one and ignore the new rule just like that.

Answer to this puzzle will be to understand how these two rules are evaluated by your browser. It follows the set of standard specificity rules.

.fruit-1{
  background-color: orange; 
}
.fruit-1{
  background-color: blue; 
}

what happens now? does it get orange or blue? It’s not one for the guessing time let’s look in to the underlying rules about specificity.

Specificity Rules

In our first example the orange color unchanged because the earlier rule has more specificity rule than the newly created one. CSS ranking for is greater for “id” than for “class”.

credits: www.webdevstudios.com

so the rules can are

• Inline styling rules the game (1,0,0,0)points
• for each ID value we give 0,1,0,0 points
• CLASS will be the second in line adding 0,0,1,0 points
• last will be elements and tags will get 0,0,0,1 points

The universal selector and inherited values have a specificity 0.They are not in the game.

Now we know the rule lets try to solve our previous mystery. we got two CSS styling as:

#favorite-fruits > li
and
.fruit-1

First one have one ID and one list item tag(li). so the score will be (0,1,0,1)points.

Second one has only one class and score is (0,0,1,0)points.

we can assume that this is like 101 and 10 for the sake of better understanding, but it’s not exactly base 10.

101 is greater than 10 so clearly first one will takeover. I bet you feel better now it’s always feel great to know the “why”.

(0,1,12,0) is a valid specificity point but this you can’t directly change it to base 10, but for the sake of understanding we can assume they are base of 10.

The one with the same specificity will go for the latest rule to apply.

Lets lookup on some styling fragments and let’s determine their specificity.

A: h1
B: #content h1
C: <div id="content"><h1 style="color: #ffffff">Heading</h1></div>

• A have 0,0,0,1 points it has element tag.
• B have 0,1,0,1 points div tag.
• c have 1,0,0,0 points it uses inline styling.

So clearly the winner is C and it’s color will be white.

Let’s look up on another complex example.

A: ul#summer-drinks li.favorite {   
color: red;   font-weight: bold; 
}
and 
B: html body div#pagewrap ul#summer-drinks li.favorite {  
 color: blue;   font-weight: 100; 
}

• A will have (0,1,1,2) one ID one Class and two tag are used.
• B will have (0,2,1,5) two ID one Class and five tag are used

B will take over by specificity order as 215 is greater than 112.

Jedi mind trick

Now you thought you understand specificity it can all go useless if you come across “!important” tag. The !important tag has the ability to destroy everything about the specificity and take over.

It’s like Jedi mind tricks it can overcome any big specificity rules. As matter of fact its not recommend to use !important tags anywhere in our CSS styling it may result in unintentional bugs in the code and become very difficult to debug when this happens.

Make your CSS rules to be more and more specific and never use the !important anywhere in styling sheets.

Happy Coding fellas.