CSS Specificity

Specificity

Through stylesheets, we apply rules to html (and xhtml, xml etc) elements. Now the problem is, what if two separate rules, contradictory to each other are applied to a single element? Well, user agents have a set of rules called Specificity, which comes to solve this problem. And the bottom line of the solution is, all the selectors don't have the same specificity. Some have it more than others. And hence, a selector with more specificity overrides its contradictory counterpart.

Now, conflicts don't occur that simply all the time. It can happen because of the nested selectors. But the rule remains same here too. Selector(s) coming from a particular rule having more specificity than another selector(s) coming from another rule, override the former.

Now we will see how we can calculate to understand the specificity. Here comes the rule for the calculation:-

• count the number of ID attributes in the selector (say x)
• count the number of other attributes and pseudo-classes in the selector (say y)
• count the number of element names in the selector (say z)
• ignore pseudo-elements.

Concatenating this three numbers x-y-z  gives the specificity.

Examples of calculating specificity

* {}

In the example above, we don't have any ID attribute, so the value of x=0;since we don't have any other attribute or text element, so value of y=0; and we don't have any element names either, so value of z=0. So specificity of the above example becomes 0-0-0 -> 0

LI {}

In the example above, we don't have any ID attribute, so the value of x=0;since we don't have any other attribute or text element, so value of y=0; but we have one element name in the selector, so value of z=1. So specificity of the above example becomes 0-0-1 -> 1

UL LI {}

In the example above, we don't have any ID attribute, so the value of x=0;since we don't have any other attribute or text element, so value of y=0; but we have two element names in the selector, so value of z=2. So specificity of the above example becomes 0-0-2 -> 2

UL OL+LI {}

<x=0 y=0 z=3 -> specificity = 3 In the example above, we don't have any ID attribute, so the value of x=0;since we don't have any other attribute or text element, so value of y=0; but we have three element names in the selector, so value of z=3. So specificity of the above example becomes 0-0-3 -> 3

H1 + *[REL=up]{}

<x=0 y=1 z=1 -> specificity = 11 In the example above, we don't have any ID attribute, so the value of x=0;since we have one other attribute name in the selector so value of y=1; and we have one element name in the selector, so value of z=1. So specificity of the above example becomes 0-1-1 -> 11

UL OL LI.red {}

<x=0 y=1 z=3 -> specificity = 13 In the example above, we don't have any ID attribute, so the value of x=0;since we have one other attribute name in the selector so value of y=1; and we have three element names in the selector, so value of z=3. So specificity of the above example becomes 0-1-3 -> 13

LI.red.level {}

<x=0 y=2 z=1 -> specificity = 21 In the example above, we don't have any ID attribute, so the value of x=0;since we have two other attribute names in the selector so value of y=2; and we have one element name in the selector, so value of z=1. So specificity of the above example becomes 0-2-1 -> 21

#test {}

<x=1 y=0 z=0 -> specificity = 100. In the example above, we have 1 id attribute(so, x=1), there is hardly any other attributes and pseudo-classes(so, y=0), we even don't have any element names and pseudo-elements (so, z=0); so the specificity becomes 100.

Previous: CSS Inheritance
Next: CSS box model