HTML and CSS Reference
In-Depth Information
If the only thing that governed which property gets applied to an
element is the order in which the selectors appear, working with CSS
would be a never-ending battle of copying and pasting and rearranging
code. Rules of specificity—how specific the description of the element
in the selector is written—are used to help determine which properties
will apply.
blockquote p { color: green; }
[...]
p { margin: 20px; color: black; }
In the previous code, all paragraph elements will have a 20-pixel margin
on each side; however, because the selector matching paragraphs
contained in
blockquote
elements is more specific, those will be the
desired color green, even though the rule is found before the simple
p
selector.
Specificity is calculated by tallying grouping the simple selectors into
three buckets, then tallying each of those buckets (a-b-c), and finally
comparing the results to other competing rules. This is from the CSS3
Selectors Module (
http://www.w3.org/TR/css3-selectors/#specificity
):
A selector's specificity is calculated as follows:
COUNTTHENUMBEROF)$SELECTORSINTHESELECTORA
COUNTTHENUMBEROFCLASSSELECTORSATTRIBUTESSELECTORSAND
PSEUDOCLASSESINTHESELECTORB
COUNTTHENUMBEROFTYPESELECTORSANDPSEUDOELEMENTSIN
THESELECTORC
IGNORETHEUNIVERSALSELECTOR
