CSS Specificity Calculator

Enter a CSS selector to see its (a, b, c) specificity score broken down by IDs, classes, and elements. Compare two selectors to find which one wins.

CSS Selector

Compare with a second selector

Selector 1

#nav .item:hover

IDs (a)

Classes (b)

Elements (c)

120

Score

(1,2,0)

How specificity is calculated:

a — ID selectors (#id): weight 100

b — Classes (.cls), attributes ([attr]), pseudo-classes (:hover): weight 10

c — Element types (div, p), pseudo-elements (::before): weight 1

Universal selector * and combinators (space, >, ~, +) have no specificity.

Frequently Asked Questions

How is CSS specificity calculated?

Specificity is represented as three numbers (a, b, c). 'a' counts ID selectors (#id). 'b' counts class selectors (.class), attribute selectors ([attr]), and pseudo-classes (:hover). 'c' counts element type selectors (div) and pseudo-elements (::before). Higher values win.

What specificity does the universal selector (*) have?

The universal selector (*) and the :where() pseudo-class have a specificity of (0, 0, 0) — they do not add to specificity.

Does inline style beat all selectors?

Inline styles (style="...") have a specificity of (1, 0, 0, 0) which beats any selector. !important overrides all specificity and should be avoided.

How does this tool compare two selectors?

Enter two selectors and the tool calculates each specificity score. It compares them from left to right (a, then b, then c) and highlights the winning selector.

The (a, b, c) Specificity Model

CSS specificity is a three-component score (a, b, c). When two selectors target the same element, the browser applies the one with the higher score, comparing left-to-right.

Component	What counts	Example
a	ID selectors	#header
b	Class, attribute, pseudo-class selectors	.btn, [type], :hover
c	Type (element) and pseudo-element selectors	div, p, ::before
-	Universal (*), :where() — score zero	*, :where(.foo)
!	Inline style — special layer (1,0,0,0)	style=""

Specificity Best Practices

Prefer classes over IDs — IDs have high specificity (1,0,0) which makes them hard to override without adding more specificity or using !important.
Avoid !important — it bypasses specificity entirely and makes debugging very difficult. Use it only as a last resort.
Use :where() for utilities — it applies styles with zero specificity, making it easy to override from anywhere in your stylesheet.
Keep selectors short — deeply nested selectors like nav ul li a span create specificity debt that accumulates over time.