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 “h1.blue” 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 “h1.blue” 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:
h1.greentea
ol li p
em
.green
span.cd
p img
#sidebar
a:link
#elixirs h1