CSS Specificity Calculator

CSS Selectors
Enter CSS Selectors
Specificity Reference
IDs (a) — Highest
#id(1,0,0)
#nav #logo(2,0,0)
Classes, Attrs, Pseudo-classes (b)
.class(0,1,0)
[type="text"](0,1,0)
:hover(0,1,0)
:not(.x)(0,1,0)
Elements & Pseudo-elements (c)
div(0,0,1)
p a span(0,0,3)
::before(0,0,1)
* (universal)(0,0,0)
💡 Inline styles add (1,0,0,0) and !important overrides everything — neither is part of selector specificity.