CSS Specificity Calculator

Calculate and compare CSS selector specificity with visual breakdown

CSS Selectors
Presets:
ID (#id)Class / Attr / Pseudo-classElement / Pseudo-elementUniversal / :where()
Results
Winner
#nav·.menu-item:hover
(0,1,2,0)
IDs
1
Classes
2
Elements
0
Overall
10200

1 ID, 2 class/attribute/pseudo-classes

.container>p.highlight
(0,0,2,1)
IDs
0
Classes
2
Elements
1
Overall
201

2 class/attribute/pseudo-classes, 1 element/pseudo-element

[type='text'].input
(0,0,2,0)
IDs
0
Classes
2
Elements
0
Overall
200

2 class/attribute/pseudo-classes

:nth-child(2)
(0,0,1,0)
IDs
0
Classes
1
Elements
0
Overall
100

1 class/attribute/pseudo-class

h1+p
(0,0,0,2)
IDs
0
Classes
0
Elements
2
Overall
2

2 element/pseudo-elements

*
(0,0,0,0)
IDs
0
Classes
0
Elements
0
Overall
0

No specificity (universal or combinators only)

Conflict Resolution

#nav .menu-item:hover wins with specificity (0,1,2,0) over .container > p.highlight [type='text'].input :nth-child(2) h1 + p *.

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

Specificity Reference

Adds to IDs (0,1,0,0)

#id
#main
#nav

Adds to Classes (0,0,1,0)

.class
[attr]
:hover
:nth-child(n)

Adds to Elements (0,0,0,1)

div
p
::before
::after

Zero Specificity

*
>
+
~
:where()