In CSS, specificity is a measure that determines the strength of a selector. The properties within selectors with the highest specificity get applied, overriding the same properties of selectors with lower specificity, regardless of their position within a stylesheet.
In CSS, specificity is a measure applied to a style rule that provides a ranking, based on its selector, for resolving conflicts between its style declarations and the declarations of other style rules.
Calculating Specificity
As defined Section 6.4.3 of the CSS2.1 specification and improved upon in Selectors Level 3:
A selector's specificity is calculated as follows:
- count the number of ID selectors in the selector (= a)
- count the number of class selectors, attributes selectors, and pseudo-classes in the selector (= b)
- count the number of type selectors and pseudo-elements in the selector (= c) ignore the universal selector
- Selectors inside the negation pseudo-class are counted like any other, but the negation itself does not count as a pseudo-class.
Concatenating the three numbers a-b-c (in a number system with a large base) gives the specificity.
Examples:
*/* 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: Repeated occurrences of the same simple selector are allowed and do increase specificity.
You may calculate and test the specificity of your selectors here
