·web
CSS Specificity Calculator
Paste two selectors, see the (a, b, c) tuple, learn which one wins. Token-by-token color breakdown. Correctly handles `:where()`, `:not()`, `:is()`, and `:has()`.
css · specificity · selectors
Paste two selectors, see the (a, b, c) tuple, learn which one wins. Token-by-token color breakdown. Correctly handles `:where()`, `:not()`, `:is()`, and `:has()`.
css · specificity · selectors
Most devs get specificity wrong — and reach for !important. This lab compares two selectors and shows which one wins, with the math broken down per token.
Three counts, compared left to right:
#header).btn, [type=text], :hover)div, ::before)#header (1, 0, 0) > .btn.large.primary (0, 3, 0) > nav a:hover (0, 1, 2). Compare a first; ties decide on b, then c.
:where() contributes 0 specificity. Modern CSS's best feature — :where(.theme-dark) .btn stays at the same specificity as a bare .btn, so users can still override.:not(), :is(), :has() take the specificity of their highest argument. :is(#x, .y) = (1, 0, 0) because #x wins.style="..." ranks above all selectors (only !important beats it).!important skips specificity entirely — among rules of the same importance, specificity decides.:where() for resets and theming so users can override without escalating!important only for third-party overrides (analytics widget, Tailwind class).block__elem--mod) enforces single-class rules — no war to begin with