← CSS

CSS Specificity Calculator

Understand the cascade faster by seeing the exact inline, ID, class, and element contribution of every selector fragment.

cssspecificitycalculatorcalculateselectorweight
Runs in your browser

Selector A

0,1,2,1
Inline
0
ID
1
Class
2
Element
1
#headerid

ID selectors add 0,1,0,0.

0,1,0,0

.navclass

Class selectors add 0,0,1,0.

0,0,1,0

>combinator

Combinators affect matching structure but do not change specificity.

0,0,0,0

aelement

Element selectors add 0,0,0,1.

0,0,0,1

:hoverpseudo-class

Pseudo-classes add 0,0,1,0.

0,0,1,0

Quick reference

Inline style
1,0,0,0
#id
0,1,0,0
.class / [attr] / :hover
0,0,1,0
element / ::before
0,0,0,1
* and combinators
0,0,0,0
:where(...)
0,0,0,0