CSSForge

CSS Specificity Calculator

Calculate and compare CSS selector specificity. Understand which rules override others.

Examples:
#nav .item:hoverHighest
0
Inline (a)
1
IDs (b)
2
Classes (c)
0
Elements (d)
Specificity score:(0, 1, 2, 0)= 120
#nav → ID (b+1):hover → pseudo-class (c+1).item → class (c+1)
button.btn
0
Inline (a)
0
IDs (b)
1
Classes (c)
1
Elements (d)
Specificity score:(0, 0, 1, 1)= 11
.btn → class (c+1)button → element (d+1)
h1 + p
0
Inline (a)
0
IDs (b)
0
Classes (c)
2
Elements (d)
Specificity score:(0, 0, 0, 2)= 2
h1 → element (d+1)p → element (d+1)
Comparison
#nav .item:hover
IDs1
Classes/Attrs/Pseudo-classes2
Elements/Pseudo-elements0
button.btn
IDs0
Classes/Attrs/Pseudo-classes1
Elements/Pseudo-elements1
h1 + p
IDs0
Classes/Attrs/Pseudo-classes0
Elements/Pseudo-elements2

Specificity Quick Reference

(0,0,0,0)
*, combinators

No specificity

(0,0,0,1)
div, h1, ::before

Element / pseudo-element

(0,0,1,0)
.class, :hover, [attr]

Class, attribute, pseudo-class

(0,1,0,0)
#id

ID selector

(1,0,0,0)
style=""

Inline style