ToolHub
Details

CSS Specificity Calculator

Calculate and compare CSS selector specificity scores

a" oninput="calc()" />
Winner
VS
Winner
Common Examples (click to fill)
#id
.class
div
#nav .item
div.class > span
ul li:nth-child(2)
body #main .post a
input[type=text]
Specificity Rules
IDs (1,0,0) — each #id adds 1 to the ID column
Classes/Attributes/Pseudo-classes (0,1,0) — .class, [attr], :hover, :nth-child()
Elements/Pseudo-elements (0,0,1) — div, ::before, ::after
Inline styles (1,0,0,0) beat all selectors; !important overrides everything