RunLocalTools

CSS Specificity Calculator — See Exactly Which Selector Wins

Paste CSS selectors or a whole stylesheet and see the exact specificity of each one — id, class, and type counts, !important flags, and a head-to-head comparison of which rule actually wins. Runs entirely in your browser.

What it does

Paste a list of selectors — or a whole stylesheet — and this tool scores every one of them the way a real browser does: as a three-part specificity value (id count, class/attribute/pseudo-class count, type/pseudo-element count), correctly handling :not(), :is(), :has(), :where(), :nth-child(... of ...), and legacy single-colon pseudo-elements. Sort the results high-to-low, check two rows to compare them directly, and see exactly why one rule beats another — or why it’s actually a tie decided by source order.

How it works

Everything runs as plain JavaScript in your browser; nothing is uploaded anywhere. The parser walks each selector character by character rather than relying on a handful of regular expressions, which is what makes it handle the tricky cases correctly:

  • :not(), :is(), :has() take the specificity of the most specific argument in their comma-separated list — not the sum, and not a flat +1 for the pseudo-class itself, which is a common mistake in simpler calculators.
  • :where() always contributes zero specificity, even to whatever selector is inside it.
  • :nth-child(An+B of S) adds the pseudo-class’s own weight plus the specificity of the most specific selector in S.
  • Legacy single-colon pseudo-elements (:before, :after, :first-line, :first-letter) are correctly scored as type-level, not class-level, matching how browsers actually treat them for backward compatibility.
  • If you paste a full stylesheet, the tool extracts selectors from top-level rules and from inside @media/@supports blocks, but intentionally skips @keyframes and @font-face bodies, since their preludes aren’t specificity-bearing selectors.

How to use it

  1. Paste either a bare list of selectors (one per line) or a complete stylesheet into the input box — the tool detects which mode you’re in automatically.
  2. Read the specificity badge next to each selector, shown as (id, class, type) — compare left to right, in that order.
  3. Switch the sort control to High → low to see your most powerful selectors at a glance, which is the fastest way to spot an over-specific rule that’s making future overrides painful.
  4. Tick the checkbox next to any two rows to open the compare panel and see exactly which one wins and why — including cases decided by !important or by a tie in source order.
  5. Copy the full report or download it as .txt/.csv if you want to keep a record while refactoring a stylesheet.

FAQ

Why does #id:not(.foo) show a higher score than I expected? Because :not() isn’t “free” in the way people assume — it contributes zero itself, but whatever’s inside the parentheses still counts. #id:not(.foo) is one id plus one class, same as if you’d written #id.foo (just matching the opposite condition).

Does !important change the specificity score? No — !important is a separate, stronger override that happens before specificity is even considered. This tool flags it separately and factors it into the compare panel’s verdict, but it’s never mixed into the (id, class, type) numbers themselves.

Why did my selector get dropped or throw a warning? An unclosed bracket or parenthesis will stop that one selector from parsing further, but it won’t affect anything else you pasted — you’ll see a warning icon on that row explaining what went wrong. Nothing is ever silently discarded.

Can it handle Sass/SCSS nesting or the & selector? Not by itself — & refers to a parent selector, so its real specificity depends on context this tool doesn’t have. It’s flagged with a warning and treated as contributing nothing, so scores stay usable rather than wrong.

Is inline style="" specificity included? No — this tool scores selectors, and inline styles by definition don’t have one (they always outrank any selector-based rule, short of a stylesheet !important). If you’re inlining CSS for email, the CSS Inliner handles that exact cascade for you.

What happens with duplicate or near-duplicate selectors in a big stylesheet? This tool shows you every one, but if what you actually want is to merge duplicates and shrink the file, Remove Duplicate CSS is built for that.

Limitations

  • Specificity is computed from the selector text alone; it doesn’t know about your actual DOM, so it can’t tell you whether a selector matches anything.
  • The visual comparison bar is a rough guide only — specificity is compared column-by-column (id, then class, then type), not as one merged number, so two very different-looking bars can still represent a genuine tie on the columns that matter.