Skip to main content

Free CSS Specificity Calculator

Calculate CSS selector specificity as [a, b, c] values. Compare multiple selectors to see which one wins.

100% client-side - your data never leaves your browser.

ID (a) Class/Attr/Pseudo-class (b) Element/Pseudo-element (c)
h1
0
0
1
(0,0,1)
1 element/pseudo-element
.nav a
0
1
1
(0,1,1)
1 class/attribute/pseudo-class, 1 element/pseudo-element
#header .title
1
1
0
(1,1,0)
1 ID selector, 1 class/attribute/pseudo-class
button:hover
0
1
1
(0,1,1)
1 class/attribute/pseudo-class, 1 element/pseudo-element
input[type="text"]
0
1
1
(0,1,1)
1 class/attribute/pseudo-class, 1 element/pseudo-element
Highest specificity: #header .title(1,1,0)

Want automated scanning?

SCOUTb2 runs 25+ accessibility, performance, SEO, and security checks on any page automatically.

Install SCOUTb2 Free