Calculating Specificity

1.If one declaration is from a style attribute, rather than a rule with a selector (an inline style), it has the highest specificity. If none of the declarations are inline, proceed to step two.

 

2.Count the ID selectors .The declaration with the highest count has the highest specificity. If two or more have the same number of ID selectors, or they all have zero ID selectors, proceed to step three.

 

3.Count the class selectors  (for example, .test), attribute selectors(for example, [type="submit"]), and pseudo-classes (for example, :hover).The declaration with the highest total has the highest specificity. If two or more
   have the same total, or they all have totals of zero, proceed to step four.

 

4.Count the element type selectors (for example div) and pseudo-elements (for example, :first-letter). The declaration with the highest total has the highest specificity.

 

The W3C recommendation (6.4.3)8 describes the method for calculating a selector’s specificity. The result of this calculation takes the form of four comma-separated values, a,b,c,d,9 where the values in column “a” are the
most important and those in column “d” are least important. A selector’s specificity is calculated as follows:

 

• To calculate a, count 1 if the declaration is from a style attribute rather than a rule with a selector (an inline style), 0 otherwise.
• To calculate b, count the number of ID attributes in the selector.
• To calculate c, count the number of  class selectors , other attributes and pseudo-classes in the selector.
• To calculate d, count the number of element names and pseudo-elements in the selector.