HTML and CSS Reference
In-Depth Information
<style>
element in this example, and you'll
see that the rule in that file is then applied.
But there is a complication. The last rule
encountered is used only because the previ-
ous rules used the same selector. If the selec-
tor in the linked style sheet is changed, then
this rule will win:
body p {
color: white;
background-color: black;
}
This rule wins because it has a higher specificity. The specificity is
based on the selectors used in the rule. You can use this straightfor-
ward process to calculate the specificity of any selector.
Step
Action
#myelement em
.myclass em
body p em
a
= 1
a
= 0
a
= 0
1
Count the number of ID selectors in
the rule, and make a note of this
value as
a
.
b
= 0
b
= 1
b
= 0
2
Count the number of class selectors
in the rule, and make a note of this
value as
b
.
c
= 1
c
= 1
c
= 3
3
Count the number of type selectors
in the rule, and make a note of this
value as
c
.
4
Combine
a
,
b
, and
c
into a number
where each letter represents a digit.
The highest number is the most
specific.
101
011
003
Any rule with an
ID
selector is more specific than any rule with just a
class selector, which in turn is always more specific than any rule made
