CSS Specificity Calculator

Free

Enter CSS selectors to see their specificity score — understand exactly why one rule overrides another.

Try:

Selectors

WINS

(1,2,0)

score: 120

#nav.link:hover

(0,2,1)

score: 21

.containerp.text

(0,1,3)

score: 13

divulli.active

Most Specific — Wins the Cascade

#nav .link:hover

Score: (1,2,0) = 120

Ranked by Specificity

1#nav .link:hover(1,2,0)

2.container > p.text(0,2,1)

3div ul li.active(0,1,3)

Specificity Reference

ID (#id)#header

(1,0,0)

Class / Attribute / Pseudo-class.active, [type], :hover

(0,1,0)

Element / Pseudo-elementdiv, ::before

(0,0,1)

Universal / Combinators*, >, +, ~

(0,0,0)

How specificity works: Three-column score (a, b, c). Higher 'a' always beats lower 'a', regardless of b and c. Same column? Next column breaks the tie. Same specificity? Last declaration in source order wins.

:not(), :is(), :has() take the specificity of their most specific argument. :where() always contributes 0.

CSS Specificity Calculator

Reviews