DeveloperUtilityEducation
CSS Specificity Calculator
Paste a CSS selector and see its specificity as (IDs, classes, types) with a colour-coded breakdown of every part, plus how :is(), :not() and :where() count.
#nav ul li a.active
1a
1b
3c
Specificity (1, 1, 3)
ID → aclass / attr / pseudo-class → btype / pseudo-element → c:is/:not/:has → arg weightno weight
What specificity actually is
When two CSS rules set the same property on the same element, the browser needs a tie-breaker. Specificity is that tie-breaker: a three-part score (a, b, c) computed from the selector.
- a — number of ID selectors (
#header). - b — classes, attribute selectors and pseudo-classes (
.btn,[type="text"],:hover). - c — type/element selectors and pseudo-elements (
div,::before).
How the comparison works
The three columns are compared left to right, like a number — but each column is independent and does not carry. A single ID (1, 0, 0) beats any number of classes, so (1, 0, 0) wins over (0, 20, 0). Only if a ties do you compare b, then c. If the full score ties, the rule that appears later in the source wins.
The functional pseudo-classes
:is() and :not()
Contribute the specificity of their most specific argument. The pseudo-class itself adds nothing.:has()
Same rule as:is() — takes its most specific argument's weight.:where()
Always contributes zero, no matter what is inside — the modern way to write low-priority defaults.What sits outside the (a, b, c) score
- Inline styles (
style="…") outrank every selector — think of them as a higher column abovea. - !important jumps the cascade entirely; it is resolved before specificity is even considered.
- The universal selector
*and combinators (> + ~) add nothing to specificity.