DONT ADD ANYTHING HERE!
-
Count the number of
id selectors in the selector (=a)
-
Count the number of
class selectorsattribute selectorspseudo-classes
in the selector (=b)
-
Count the number of
type selectors and pseudo-elements
in the selector (=c)
-
Concatenate the three numbers
a b c to get the specificity.
- Ignore the universal selector
- Selectors inside the negation pseudo-class are counted like any other
- Negation itself does not count as a pseudo-class.
Example
-
li.class:nth-of-type(3n)
answer
-
0 2 1
-
Selector specificity is
21
-
#myDiv li.class a[href]
answer
1 2 2- Selector specificity is
122
Notes
- Specificity is the algorithm that the browser uses to decide
which property value is applied to an element (MDN)
References
