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 :
<p class="aside">
It's a fine way to start a day, don't you think?
Search WWH ::

Custom Search