CSS Specificity Calculator

CSS specificity determines which rule wins when multiple rules target the same element. It is calculated as a three-part score (a, b, c) where higher scores win.

Specificity components

Component	Score	Examples
Inline styles	(1, 0, 0)	`style="..."`
ID selectors	(0, 1, 0)	`#header`, `#nav`
Class, attribute, pseudo-class	(0, 0, 1)	`.active`, `[type=text]`, `:hover`
Type selectors, pseudo-elements	(0, 0, 1)	`div`, `p`, `::before`
Universal selector	(0, 0, 0)	`*`

Specificity comparison rules

Specificity is compared component by component, from left to right. (1, 0, 0) always beats (0, 99, 99), a single ID beats any number of classes.

The !important declaration overrides all specificity calculations, use it sparingly, as it makes debugging CSS very difficult.

Common specificity issues

Using too many IDs, IDs have very high specificity and make overriding styles difficult
Over-qualifying selectors, div.container .title is harder to override than .title
Not understanding the cascade, specificity is only one of three factors (source order and inheritance also matter)