HTML and CSS Reference
In-Depth Information
2.1 HOW TO CALCULATE SPECIFICITY?
There are several ways to calculate a selector's specificity.
The quickest way is to do the following. Add 1 for each element and pseudo-
element (for example,
:before
and
:after
); add 10 for each attribute (for
example,
[type=”text”]
), class and pseudo-class (for example,
:link
or
:hover
); add 100 for each ID; and add 1000 for an inline style.
Let's calculate the specificity of the following selectors using this method:
•
p.note
1 class + 1 element = 11
•
#sidebar p[lang="en"]
1 ID + 1 attribute + 1 element = 111
•
body #main .post ul li:last-child
1 ID + 1 class + 1 pseudo-class + 3 elements = 123
A similar method, described in the W3C's specifications, is to start with a=0,
b=0, c=0 and d=0 and replace the numbers accordingly:
• a = 1 if the style is inline,
• b = the number of IDs,
• c = the number of attribute selectors, classes and pseudo-classes,
• d = the number of element names and pseudo-elements.
Let's calculate the specificity of another set of selectors:
• <p style="color:#000000;">
a=1, b=0, c=0, d=0 → 1000
