CSS Specificity Calculator

Calculate and compare CSS selector specificity

WINNERdiv#main .content p

112

#header .nav a

111

.nav a:hover

021

a

001

How Specificity Works

A (IDs)

#header, #nav — Each ID = +1,0,0

B (Classes)

.nav, :hover, [type] — Each = +0,1,0

C (Elements)

div, p, a — Each element = +0,0,1