Professional Innovations

December 22nd 2014 / CSS

CSS Specificity

Posted by Alain Francis

Understanding CSS specifity is essential and considered as one of the basic rules  of CSS.

Who hasn't been frustrated after applying a class to an element without getting the desired outcome?

In this section we will be discussing such scenarios while calculating the actual specificity value.

Such cases are faced while updating a project develped by someone else or while working on a framework that gives predefined classes.

Here is a simple example:

<div id="top_section">

                <div class="top_section_description"></div>

</div>

Our .top_section_description class contains a color property set to red and a left and right padding, but unfortunately the color property is being ignored.

Poking around more in the CSS file, we found the statment below

div#top_section > div {

                color:black;

}

All the div's that are children of div#top_section are assigned a color property set to black, this statement is overriding our class.

Calculating CSS specificity value.

Our above class (.top_section_description) failed because it had a lower specificity than the ID statement.

Take a look at how the numbers are calculated.

specificity-calculationbase_0.png

 

  • If the element has inline styling, that automatically1 wins (1,0,0,0 points)
  • For each ID value, apply 0,1,0,0 points
  • For each class value (or pseudo-class or attribute selector), apply 0,0,1,0 points
  • For each element reference, apply 0,0,0,1 point

 

So, in our above example the class had 10 points while the ID had 100 points. ID selector always wins over the class selector.

Important Notes

  • The universal selector (*) has no specificity value (0,0,0,0)
  • Pseudo-elements (e.g. :first-line) get 0,0,0,1 unlike their psuedo-class brethren which get 0,0,1,0
  • The pseudo-class :not() adds no specificity by itself, only what's inside its parentheses.
  • The !important value appended on a CSS property value is an automatic win. It overrides even inline styles from the markup. The only way an !important value can be overridden is with another !important rule declared later in the CSS and with equal or greater specificity value otherwise. You could think of it as adding 1,0,0,0,0 to the specificity value.

So in order to apply our class, we should use the below code

div#top_section div.top_section_description{

                color:red;

}

It will have a value of 100 (ID) +  10 (Class) = 110