CSS Specificity Calculator

Paste a CSS selector and get its specificity as (IDs, classes, elements) with a breakdown.

Scored as (a, b, c) = IDs, classes/attributes/pseudo-classes, elements/pseudo-elements. Inline styles outrank all selectors; !important overrides specificity. :not(), :is() and :where() are simplified here.

Frequently asked questions

What is CSS specificity?

It's how browsers decide which rule wins when several target the same element. It's compared as three numbers: IDs, then classes/attributes/pseudo-classes, then elements/pseudo-elements.

How is it read?

Higher beats lower, left to right. (1,0,0) — a single ID — beats (0,9,9), nine classes and nine elements. Inline styles rank even higher, and !important overrides everything.

Why are :not() and :is() noted as simplified?

Their specificity comes from their most specific argument, not the pseudo-class itself. This tool counts them simply; for those, evaluate the argument's specificity.