HTML and CSS Reference
In-Depth Information
html > body table tr[id="totals"] td ul > li {color: maroon;} /* 0,0,1,7 */
li#answer {color: navy;} /* 0,1,0,1 (winner) */
I've indicated the winning rule in each pair; in each case, it's because the specificity is
higher. Notice how they're sorted. In the second pair, the selector
h2.grape
wins be-
cause it has an extra
1
:
0,0,1,1
beats out
0,0,0,1
. In the third pair, the second rule wins
because
0,1,0,1
wins out over
0,0,1,7
. In fact, the specificity value
0,0,1,0
will win
out over the value
0,0,0,13
.
This happens because the values are sorted from left to right. A specificity of
1,0,0,0
will win out over any specificity that begins with a
0
, no matter what the rest of the
numbers might be. So
0,1,0,1
wins over
0,0,1,7
because the
1
in the first value's second
position beats out the
0
in the second value's second position.
Declarations and Specificity
Once the specificity of a selector has been determined, the value will be conferred on
all of its associated declarations. Consider this rule:
h1 {color: silver; background: black;}
For specificity purposes, the user agent must treat the rule as if it were “ungrouped”
into separate rules. Thus, the previous example would become:
h1 {color: silver;}
h1 {background: black;}
Both have a specificity of
0,0,0,1
, and that's the value conferred on each declaration.
The same splitting-up process happens with a grouped selector as well. Given the rule:
h1, h2.section {color: silver; background: black;}
the user agent treats it as follows:
h1 {color: silver;} /* 0,0,0,1 */
h1 {background: black;} /* 0,0,0,1 */
h2.section {color: silver;} /* 0,0,1,1 */
h2.section {background: black;} /* 0,0,1,1 */
This becomes important in situations where multiple rules match the same element
and where some declarations clash. For example, consider these rules:
h1 + p {color: black; font-style: italic;} /* 0,0,0,2 */
p {color: gray; background: white; font-style: normal;} /* 0,0,0,1 */
*.aside {color: black; background: silver;} /* 0,0,1,0 */
When applied to the following markup, the content will be rendered as shown in
Figure 2-1
:
<h1>Greetings!</h1>
<p class="aside">
It's a fine way to start a day, don't you think?
</p>
