CSS Specificity Calculator
Calculate the specificity score of any CSS selector instantly. Shows the (a, b, c) breakdown and compares multiple selectors side by side. Free, browser-based.
💻 Developer Tools
Free
Browser-based
Press Enter or click Add. Add multiple selectors to compare.
How CSS Specificity Works
Specificity determines which CSS rule wins when multiple rules target the same element. It is calculated as a three-part score (a, b, c) where a higher number in a leftmost column always wins, regardless of counts in the other columns.
Specificity Scoring Table
| Column | What counts | Examples |
|---|---|---|
| A — Inline / ID | ID selectors | #header, #nav |
| B — Class / Attr / Pseudo-class | Classes, attributes, pseudo-classes | .active, [type], :hover |
| C — Element / Pseudo-element | Element types, pseudo-elements | div, p, ::before |
Special Cases
!important overrides all specificity. The universal selector * and combinators (>, +, ~, space) do not contribute to specificity. The :not() pseudo-class itself adds 0, but its argument does count.
Practical Specificity Rules for Maintainable CSS
- Avoid ID selectors in stylesheets — an ID selector (1,0,0) is so specific it can only be overridden by another ID or !important. Use classes instead.
- Never use !important as a fix — it steps outside the cascade entirely and creates debt. Increase specificity with a more targeted selector or restructure the HTML instead.
- Keep selectors short — a selector like
.sidebar .card .title span(0,3,1) is brittle. Changing the HTML structure will break the rule. A single class is more robust. - Utility-first CSS (e.g. Tailwind) sidesteps specificity wars — because each utility class targets a single property, conflicts are rare. The tradeoff is verbose HTML.
- Use the cascade intentionally — broad rules (low specificity) set defaults; narrow rules (higher specificity) override them for specific contexts. This is the intended design pattern.