HTML and CSS Reference
In-Depth Information
Welcome to the “What's my specificity?” game
To calculate the specificity, you start with a set of three numbers, like this:
0 0 0
And then we just tally up various things from the selector, like this:
Does the selector
have any classes
or pseudo-classes?
One point each.
Does the selector
have any ids? One
point each.
Does the selector have
any element names?
One point for each.
0 0 0
B oth “h1” and “h1.b lue” have one
e lement, so they bo th get a 1 in
t he rightm ost numb er column .
For instance, the selector “h1” has one element in it, so you get:
Read th is as the
number one.
0 0 1
As another example, the selector “” has one element and
one class, so you'd get:
Neither has ids in it s selector,
so they both get a 0 in the
left number column
Read thi s as the
number e leven.
0 1 1
After you've tallied up all the ids, classes, and elements, the bigger the specificity
number, the more specific the rule. So, since “” has a specificity of 11, it is
more specific than “h1”, which has a specificity of 1.
Try your hand at calculating the specificity of these selectors using the rules above:
ol li p
p img
#elixirs h1
Search WWH ::

Custom Search