Extra – Priority of CSS selectors

CSS stands for Cascading Style sheets. Where cascading means the same element may be affected by multiple rules.

That’s all fine when multiple rules for the same element apply different properties.

But what happens when different rules are defining the same property? Which one is applied? Here comes the priority formula.

The most priority one is !important. But be careful when using it.

body {
  color: red !important;
}

Otherwise, it is the selector combination to determine the priority.

!important style   id   class   tag

   A         B      C      D     E

<div>Hello CSS</div>
<div id='target1' class='important'>Target 1: Hello CSS</div>
<div id='target2' class='important'>Target 2: Hello CSS</div>
<div id='target3' class='important'>Target 3: Hello CSS</div>
<div id='target4' class='important' style='color:black'>Target 4: Hello CSS</div>

 div {
   color: orange;
 }
 .important {
   color: red;
 }
 
 #target1 {
   color: blue;
}

#target2.important {
  color: green;
}
/*div#target2.important {
  color: yellow;
}*/

Edit the code and do your experiment in jsFiddle.

What’s next? We’re going to take a look at “Project requirement”.