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.