IMHO SPECIFICITY is a ugly word for saying “priority” of a css property.
usually the last css rule overwrites the first ones.
max-width: 100%;
background-color: red;
height: 50px;
}
.divisor {
max-width: 100%;
height: 50px;
background-color: blue;
}
but #elementID { background-color: red; } will overwrite .element { background-color: blue; } even if#elementID is the last css rule affecting background-color.
but to add to the confusion… there is also
specificity | die Ausprägung Pl.: die Ausprägungen | ||||||
specificity | die Genauigkeit kein Pl. | ||||||
specificity | spezifische Wirksamkeit | ||||||
specificity | die Spezifität Pl.: die Spezifitäten | ||||||
specificity | die Exaktheitsquote [Dokumentation] |
2.1 HOW TO CALCULATE SPECIFICITY?
There are several ways to calculate a selector’s specificity.
The quickest way is to do the following. Add 1 for each element and pseudo-element (for example,
and
); add 10 for each attribute (for example,
), class and pseudo-class (for example,
or
); add 100 for each ID; and add 1000 for an inline style.
Let’s calculate the specificity of the following selectors using this method:
-
<strong>p.note</strong>
1 class + 1 element = 11
-
<strong>#sidebar p[lang="en"]</strong>
1 ID + 1 attribute + 1 element = 111
-
<strong>body #main .post ul li:last-child</strong>
1 ID + 1 class + 1 pseudo-class + 3 elements = 123
A similar method, described in the W3C’s specifications, is to start with a=0, b=0, c=0 and d=0 and replace the numbers accordingly:
- a = 1 if the style is inline,
- b = the number of IDs,
- c = the number of attribute selectors, classes and pseudo-classes,
- d = the number of element names and pseudo-elements.
Let’s calculate the specificity of another set of selectors:
-
<strong><p style="color:#000000;"></strong>
a=1, b=0, c=0, d=0 → 1000
-
<strong>footer nav li:last-child</strong>
a=0, b=0, c=1, d=3 → 0013
-
<strong>#sidebar input:not([type="submit"])</strong>
a=0, b=1, c=1, d=1 → 0111
(Note that the negation pseudo-class doesn’t count, but the selector inside it does.)