CSS Specificity Calculator

Enter one CSS selector per line to calculate specificity scores using the (inline, IDs, classes, elements) notation. Compare multiple selectors to see which wins.

IDs — #id

Classes — .class, [attr], :pseudo-class

Elements — div, ::pseudo-element

CSS Selectors (one per line)

How CSS Specificity Works

Specificity is written as (inline, IDs, classes, elements) — compared left to right.
#id selectors = +1 to IDs column.
.class, [attr], :pseudo-class = +1 to Classes.
element, ::pseudo-element = +1 to Elements.
Universal selector * = 0 specificity.
!important overrides specificity entirely (use sparingly!).
:not() has no specificity itself but its argument does.

Loading tool...