How do pseudo-classes affect specificity?

CSSJunior~1 min read

Pseudo-classes count as class-level selectors, so they increase specificity, adding +1 to the class column of the specificity formula.

Simplified:

Selector type	Specificity
`#id`	1,0,0
`.class`, `:hover`, `:focus`, `:nth-child()`, etc.	0,1,0
`element` or `::pseudo-element`	0,0,1

So:

:hover, :focus, :active, :nth-child(), :not(), and other pseudo-classes → increase specificity, like a class
:where() is the exception, its specificity is always 0, even if it contains other selectors

Conclusion: most pseudo-classes make a selector stronger, as if you had added a class to it.

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.