CSS -Priority rules (weight)

December 2016



Did you know that CSS assings a specific weight to each style rule? This is very aspect of CSS as it will avoid any inconsistencies between what you want to get and what you get in reality.

An example:
Try the following HTML code:

<html>  
  <head>  
      <style>  
          div {background-color:blue;}  
      </style>  
  </head>  
  <body>  
      <div style="width:100px; height:100px;"></div>  
  </body>  
</html>


As result you will get a blue square of 100X100 px.

Now add a class to it:

<html>
  <head>
      <style>
          div {background-color: blue;}
          . MaDiv {background-color: red;}
      </ Style>
  </ Head>
  <body>
      <div style="width:100px; class="maDiv" height:100px;"> </ div>
  </ Body>
</ Html>

The square turned red!

Now use an ID:
<html>  
  <head>  
      <style>  
          div {background-color:blue;}  
          .maDiv {background-color:red;}  
          #maDiv {background-color:yellow;}  
      </style>  
  </head>  
  <body>  
      <div class="maDiv" id="maDiv" style="width:100px; height:100px;"></div>  
  </body>  
</html>


The square is now yellow because the ID is stronger than the class.
Next use a defines style ithe tags:
<html>
  <head>
      <style>
          div {background-color: blue;}
          . MaDiv {background-color: red;}
          # MaDiv {background-color: yellow;}
      </ Style>
  </ Head>
  <body>
      <div class="maDiv" id="maDiv" style="width:100px; height:100px; background-color:green;"> </ div>
  </ Body>
</ Html>

The square turns green: while in theory, four different colors have been assigned to it!

The weights


These results are the consequences of weight (also called priority rules) CSS:
  • The weight of a tag is 1
  • The weight of a class is 10.
  • The weight of an ID is 100.
  • The weight of a style attribute is 1000.

These are the basic weight, there are others, for example, pseudo-classes (: hover,: after,: focus ...). Example the CSS attribute: hover only adds a little weight to an element when the mouse cursor is passed over.

The accumulation of weight


A style rule can then have an intermediate weight. Indeed, the weight stack.
Example:
<html>  
  <head>  
      <style>  
          div {background-color:blue;}  
          .maDiv {background-color:red;}  
          .maDiv {background-color:yellow;}  
      </style>  
  </head>  
  <body>  
      <div class="maDiv" style="width:100px; height:100px;"></div>  
  </body>  
</html>

As you can see, I have an element (weight 1) and two equal classes (weight 10): the last element takes over and our square is yellow. Now upon adding
<html>  
  <head>  
      <style>  
          div {background-color:blue;}  
          div.maDiv {background-color:red;}  
          .maDiv {background-color:yellow;}  
      </style>  
  </head>  
  <body>  
      <div class="maDiv" style="width:100px; height:100px;"></div>  
  </body>  
</html>


The square turns red. Why?
  • ".maDiv" - 10
  • "div.maDiv" combines an element and a class - 11!

Warning: sometimes adding a class to a rule won't suffice to increase the weight of all the elements that were involved.

Note that


Compare the result of this code:

<html>  
  <head>  
      <style>  
          div {background-color:blue;}  
          div#maDiv {background-color:red;}  
      </style>  
  </head>  
  <body>  
      <div id="maDiv" style="width:100px; height:100px;"></div>  
  </body>  
</html>


With the result of this one:

<html>  
  <head>  
      <style>  
          div {background-color:blue;}  
          div #maDiv {background-color:red;}  
      </style>  
  </head>  
  <body>  
      <div id="maDiv" style="width:100px; height:100px;"></div>  
  </body>  
</html>


In the first case our div is red, in the second case it is blue!
"But why, the element + ID = ,so it should always be red!"
Note the subtle difference:
  • div # maDiv: applies to div with the "maDiv" ID.
  • div #maDiv: Applies to all elements whose ID is "maDiv" contained within a parent element called "div".


Our square is only concerned with the first rule. As a general rule, always pay attention to how you write your rules, properly use spaces, commas..etc
Examples:
  • p .myClass a {} : for all links contained in any element whose class is "myClass", all contained in any <p> element. Weight: 12.
  • p.myClass, a {} : for all links and all <p> whose class is "myClass". Weight: 11 or 1
  • p, .myClass, a {} : for all links and all elements whose class is "myClass" and all <p> element. Weight: 1 to 10 or 1

Related :

This document entitled « CSS -Priority rules (weight) » from CCM (ccm.net) is made available under the Creative Commons license. You can copy, modify copies of this page, under the conditions stipulated by the license, as this note appears clearly.