Skip to content
FrontendHaltFrontendHalt
CSS·Intermediate·Coding·1 min read

How is specificity calculated?

Short interview answer

Compare ID selectors, then class/attribute/pseudo-class selectors, then type/pseudo-element selectors lexicographically. Combinators do not add specificity. :where() always contributes zero, while :is(), :not(), and :has() use the most specific selector in their arguments.

Example

CSS
#app .card a       /* (1,1,1) */.card.active a     /* (0,2,1) */a:where(.card)     /* (0,0,1) — :where contributes nothing */

Key takeaway

Explain the underlying mental model clearly, then support it with a concrete example and its trade-offs.

← Back to Cascade, specificity, and layers

Related questions