Specificity and the Cascade - Pro CSS Techniques - page 37

Figure 3-5. On the left, Safari's default list rendering; on the right, our generated replacement
The Cascade: Calculating Specificity
Now that we're all on the same page regarding selectors, let's explore the laws of specificity and
the cascade. Basically, in CSS every rule is assigned a specificity value based on the composi-
tion of its selector, its location within a style sheet, and the location of that style sheet relative
to other style sheets. Specificity is how rules interact with each other, and which rules have
more importance than others (and therefore, override them). In other words, specificity is
what helps the browser determine whether p#description carries more weight than
p.description , or if a rule with the selector ul#nav li a:hover should override another rule
with ul li a:hover . Understanding how this works is key to mastering CSS.
There is a fairly straightforward system that governs the order of priority of one selector
over another, but the trick is understanding the way the browsers assign importance to selec-
tors—and that's what we're going to discuss next.
How the CSS 2.1 Specification Describes the Cascade
The key to comprehending the cascade lies (almost surprisingly) within the actual W3C speci-
fication ( www.w3.org/TR/CSS21/cascade.html#cascading-order ). The description of the
cascading order is perhaps the most clearly written part of the entire specification, which is
good news for us all, since it might otherwise be quite difficult to understand:
6.4.1 Cascading order
To find the value for an element/property combination, user agents must apply the fol-
lowing sorting order:
1. Find all declarations that apply to the element and property in question, for the target
media type. Declarations apply if the associated selector matches the element in question.
2. Sort according to importance (normal or important) and origin (author, user, or user
agent). In ascending order of precedence:
1. user agent declarations
2. user normal declarations
3. author normal declarations
4. author important declarations
5. user important declarations