CSS Specificity Calculator
Paste selectors, one per line, and see each one's specificity broken down and ranked in the order the cascade would actually apply them.
Results appear here, ranked from highest to lowest specificity.
How it works
Each selector is split on combinators and tokenized: #id tokens count as IDs,
.class, [attr], and :pseudo-class tokens count as
classes, and bare element names and ::pseudo-elements count as elements.
The universal selector * and combinators like >, +,
~ add nothing. Each selector ends up as a triple (IDs, classes, elements),
which is exactly how the CSS spec itself defines specificity, so the ranking here matches
what your browser's own cascade will do.
Everything runs on keystroke in this page's JavaScript. Pasting a stylesheet's worth of selectors never leaves your browser.
Common questions
How is specificity calculated?
As four counted tiers: inline styles, then ID selectors, then classes/attribute selectors/pseudo-classes, then element and pseudo-element selectors. Higher tiers always beat lower ones regardless of how many lower-tier selectors you stack, so 1 ID (0,1,0,0) always beats 20 classes (0,0,20,0).
Why do two of my selectors tie?
When specificity ties exactly, CSS falls back to source order: whichever rule appears later in the stylesheet (or was added later) wins. This tool sorts ties by the order you pasted them in, matching that behavior.
Does this send my CSS anywhere?
No. Selectors are parsed and scored entirely in your browser with a small JavaScript tokenizer. Nothing is uploaded.