Specificity Rating
CSS Specificity determines when a style property should be applied irrespective of the location at which it will appear in the style sheets. The more specific a style property is, the more likely for it to be applied to the element. These simple steps will help you figure the specificity of style properties.
How to calculate specificity rating?
Count the number of element names in the selector [=a]
{ … } is 0,
p { … } is 1 and
div p { … } is 2
Count the number of ID attributes in the selector and multiply by 100 [=b] #hot { … } is 100
Count the number of pseudo-classes and other non-ID attributes in the selector and multiply it by 10 [=c]
:active {…} is 10 and
:external:link { … } is 20
Add up all three numbers and that is that property’s specificity
div a { … } = 2
div.top a { … } = 12
#main div.top a { … } = 112
blockquote ul + li { … } = 3
h2 + a [title] { … } = 12
h2 + a [title]: active { … } = 22
Concatenating the three numbers a-b-c [in a number system with a large base] gives the final specificity:
* /* a=0 b=0 c=0 -> specificity = 0 */
LI /* a=0 b=0 c=1 -> specificity = 1 */
UL LI /* a=0 b=0 c=2 -> specificity = 2 */
UL OL+LI /* a=0 b=0 c=3 -> specificity = 3 */
H1 + *[REL=up] /* a=0 b=1 c=1 -> specificity = 11 */
UL OL LI.red /* a=0 b=1 c=3 -> specificity = 13 */
LI.red.level /* a=0 b=2 c=1 -> specificity = 21 */
#x34y /* a=1 b=0 c=0 -> specificity = 100 */
#s12:not(FOO) /* a=1 b=0 c=1 -> specificity = 101 */
Note: the specificity of the styles specified in a HTML style attribute is described in another CSS3 Module “Cascade and Inheritance”.
Tips for Specificity Rating
A host of tips to have a better understanding of specificity rating:
- The higher the specificity number, the more likely it will be applied
- Negative selectors are counted just like their simple selectors argument
- Ignore pseudo-elements. Pseudo elements are elements that a CSS selector selects a portion of another element that would not otherwise be defined by the document tree. For example, the first letter or first line of a paragraph is a pseudo element. P: first letter, p: first-line
Popularity: 6% [?]
Categories: CSS Specificity, Posted on January 6, 2008 by Choppr | Log in
