CSS Specificity Calculator

Paste any CSS selector and see its specificity as the (a, b, c) tuple. Handles :is(), :not(), :has(), :where(), :nth-child(… of …), attribute selectors, pseudo-elements, and comma-separated lists. Compare two selectors side-by-side to see which one wins. Pure client-side, no upload, no tracking.

Try:
Selector A
—

a = IDs · b = classes, attributes, pseudo-classes · c = types and pseudo-elements

Normalised

—

Anatomy

  • Enter a selector.

Per-selector breakdown

How CSS specificity works
  • The tuple. Every selector has a specificity (a, b, c) where a counts IDs, b counts classes, attributes, and pseudo-classes, and c counts type selectors and pseudo-elements. The browser compares tuples left-to-right: a higher a always wins; only when a ties does b matter, and so on.
  • Combinators don't count. The descendant combinator (space), child (>), adjacent sibling (+), and general sibling (~) all add 0 to specificity. Only the simple selectors at each end contribute.
  • The universal selector is free. * contributes (0, 0, 0).
  • Pseudo-elements. ::before, ::after, ::first-line, ::first-letter, and ::selection count as pseudo-elements (the c bucket). The legacy single-colon spellings :before, :after, :first-line, :first-letter are treated identically.
  • :is(), :not(), :has(). Each adds one pseudo-class to b AND the specificity of its most specific argument. :not(.foo, #bar) is therefore the specificity of :not() plus #bar, not the sum.
  • :where() contributes 0. The wrapper and every argument inside are invisible to specificity. Use it as a "specificity opt-out" for theming.
  • :nth-child(an+b of S). Adds one pseudo-class to b AND the specificity of the most specific selector in the of list. The an+b expression contributes nothing.
  • Comma-separated lists. For A, B, C each selector is computed independently. The rule as a whole takes the maximum across the list (lexicographic on the tuple). We show every selector's specificity in the per-selector table so you can see why.
  • Attributes count as classes. [type="text"] and [data-foo~="bar"] each add 1 to b, regardless of the operator inside.
  • Nothing leaves your browser. The parser runs entirely client-side. Reload the page and the slate is wiped.