Sort by specificity of the CSS selector
More specific CSS selectors will override more general ones. To
determine the "specificity" of a CSS selector, use the following
steps:
- Count the number if ID attributes in the selector
- Count the number of attributes and pseudo-classes in the selector.
- Count the number of element names in the selector
Now concatenate these three numbers together (CSS2 says "in a number
system with a large base") to find the exact specificity of the selector.
The selector with the highest specificity number will be used.
Example:
Comparing the specificities of "h2 em
{ color: green }" and
"h2 em#foo {
color: red }":
Specificity of "h2 em
{ color: green }" = 0-0-2 (or "2")
Specificity of "h2 em#foo
{ color: red }" = 1-0-2 (or "102")
in other words, "h2 em#foo { color: red }" has a higher specificity
and would win this Cascade calculation.
Notes:
- CSS2 says that HTML presentational criteria which have
corresponding CSS renderings should be treated as having a
specificity of "0" in the Cascade calculation and are treated
as occurring at the beginning of a style sheet.
- In CSS1, HTML presentation criteria had a specificity of 1. The
change is to allow for the CSS2 "Universal Selector", which
has a specificity of "0".
- CSS2 says two conflicting things about Pseudo-elements: that
they are counted as elements in the specificity calculation and
also that they should be ignored. This is a direct contradiction
and I am not sure which is true.