HTML and CSS Reference
In-Depth Information
Chapter 7
Specificity
When more than one rule applies to the same element and they specify the same
property, there is a priority scheme that determines which rule is given precedence.
In short, CSS gives priority to the rule that has the most specific selector.
Selector specificity
There are some basic rules for calculating specificity. The lowest specificity with the
weight of 0 is given by the universal selector (
*
), which matches all elements
in the document.
* { color: red; } /* 0 */
The type selectors have the weight of 1, so a selector containing two type selectors
has a specificity of 2.
p { color: blue; } /* 1 */
body p { color: gold; } /* 2 */
A class selector has the weight of 10, as do pseudo classes and attribute selectors.
When these selectors include a type selector, they have a total weight of 11.
.a { color: lime; } /* 10 */
p:first-child { color: navy; } /* 11 */
p[class=a] { color: teal; } /* 11 */
The pseudo elements do not count for any specificity, except for the specificity
added by the selector the pseudo element is prefixed with.
p:first-letter { color: white; } /* 1 */
Id selectors have a weight of 100, so an id rule overrides most other conflicting styles.
#i { color: aqua; } /* 100 */
