CSS Specificity Calculator

Calculate and compare CSS selector specificity. Enter selectors and see which one wins. Free online CSS specificity tool.

#header .nav a:hover

0,1,2,1Winner

Inline: 0IDs: 1Classes: 2Elements: 1

body #content .article h2

0,1,1,2

Inline: 0IDs: 1Classes: 1Elements: 2

div.container > p.active

0,0,2,2

Inline: 0IDs: 0Classes: 2Elements: 2

.btn.btn-primary

0,0,2,0

Inline: 0IDs: 0Classes: 2Elements: 0

a

0,0,0,1

Inline: 0IDs: 0Classes: 0Elements: 1

a — Inline styles (style="")

b — ID selectors (#id)

c — Classes, attributes, pseudo-classes

d — Elements, pseudo-elements

Higher specificity wins. If equal, the last rule in the stylesheet wins.