CSS Specificity Calculator

Calculate the (a, b, c) specificity score of any CSS selector. Compare multiple selectors and see which wins the cascade.

Color key:A — IDsB — Classes / attrs / pseudo-classesC — Elements / pseudo-elements

CSS Selector

1IDs (A)

2Classes (B)

1Elements (C)

Score(1,2,1)= 121

#nav .item:hover > span

Breakdown

#navID selector+1 to A (IDs)(1,0,0)

.itemClass / attribute / pseudo-class+1 to B (Classes)(0,1,0)

:hoverClass / attribute / pseudo-class+1 to B (Classes)(0,1,0)

spanElement / pseudo-element+1 to C (Elements)(0,0,1)

Compare Selectors

#SelectorABCTotal

1#nav .item:hover > span121121

2.item:hover02020

Common Examples

SelectorABCTotalNote

*0000Universal — zero specificity

div0011Element type

div p0022Descendant combinator

.class01010Class selector

div.class01111Element + class

.a.b.c03030Three classes

#id100100ID selector

#id .item110110ID + class

#nav .item:hover120120ID + class + pseudo-class

#nav .item:hover > span121121ID + class + pseudo + element

a:hover01111Element + pseudo-class

a:visited01111Element + pseudo-class

input[type="text"]01111Element + attribute

[disabled]01010Attribute selector

:not(.active)01010:not() counts its argument

:is(h1, h2, h3)0011:is() uses most specific arg

:where(.a, .b)0000:where() = zero specificity

li::before0022Pseudo-element

::placeholder0011Pseudo-element

ul > li:first-child01212Element + child combinator + pseudo

How it works: Specificity is a weight applied to CSS declarations. The A column counts ID selectors (#id). B counts class selectors (.class), attribute selectors ([attr]), and pseudo-classes (:hover). C counts element type selectors (div, span) and pseudo-elements (::before). The universal selector * and combinators (+, >, ~, space) contribute nothing.Special rules: :not(), :is(), and :has() take the specificity of their most specific argument. :where() always contributes zero specificity.