Pseudo-Class Specificity
Each pseudo-class adds one class-level (0-1-0) to specificity. The exception is :not(), :is(), and :has() — their specificity comes from the most specific selector in their argument list.
CSS
Intermediate
5 min read
Pseudo-Class Specificity
Example
/* Specificity: 0-1-1 (1 class + 1 element) */
a:hover { color: blue; }
/* :not() takes specificity from its argument */
a:not(.active) { color: grey; } /* 0-1-1 */
a:not(#special) { color: grey; } /* 1-0-1 — ID specificity! */
/* :where() always adds 0 specificity */
:where(h1, h2) { margin: 0; } /* 0-0-0 */ Pro Tip
:where() is ideal for CSS resets and default styles because it never wins specificity battles.