⚖️

CSS Specificity Calculator

Calculate and compare CSS selector specificity

CSS SelectorsOne per line to compare

Quick Examples

Specificity Results

div#main .content ul li.active a:hover

(0,1,3,4)

IDs: 1Classes: 3Elements: 4

Understanding CSS Specificity

Specificity Format: (I, A, B, C)

IInline styles (style="...")

AID selectors (#id)

BClasses, attributes, pseudo-classes

CElements, pseudo-elements

Examples

*(0,0,0,0)

li(0,0,0,1)

.class(0,0,1,0)

#id(0,1,0,0)

div.foo#bar(0,1,1,1)

Tip: When two selectors have the same specificity, the one that appears later in the CSS wins. Use !important sparingly as it overrides normal specificity rules.