Skip to content
TextArray1.41.0
100% local

CSS specificity calculator

Calculate the specificity of CSS selectors and see which one wins.

Input
Output
Related tools
CSS formatterDeveloper tools
CSS minifierDeveloper tools
CSS unit converterDeveloper tools
i18n key diffDeveloper tools
TOML to JSON converterDeveloper tools
SQL to JSONDeveloper tools
CSS specificity calculator
Paste one or more CSS selectors, one per line, and this tool calculates each one's specificity as the standard three-part score: IDs, classes (plus attributes and pseudo-classes), and elements (plus pseudo-elements). Specificity decides which conflicting rule a browser applies, so it's useful when two style rules target the same element and you need to know which one wins, or when you're debugging why an override isn't taking effect.
Turn on Split comma-separated lists to score each selector in a list like ".a, .b" on its own line instead of combining them into one. Sort by strongest first reorders the results from highest specificity to lowest. Choose Table for a column layout with IDs, classes and elements broken out, or 0-1-2 notation for a compact score like "1-0-2" per selector. Show breakdown explanation lists which part of each selector — an ID, a class, an element — contributed to the score, which is the fastest way to see exactly why one rule outranks another.
The calculator follows the CSS Selectors specification for the tricky cases: :where() always scores zero regardless of what's inside it, while :is(), :not() and :has() take on the specificity of their most specific argument. A selector containing !important is flagged, since it overrides the normal cascade regardless of specificity and is worth knowing about even though it isn't part of the selector's own score. Windows and Unix line endings are treated the same, and blank lines are ignored.
Everything runs locally in your browser — the selectors you paste are never uploaded anywhere, which matters if you're checking against a private codebase. Copy the result, download it as a .txt file, or send the output back into the input to keep refining your selectors.
FAQ
What does the 0-1-2 notation mean?
Each number is a specificity tier: the first counts ID selectors, the second counts classes, attributes and pseudo-classes, and the third counts element and pseudo-element selectors. A selector with a higher first number always outranks one with only a higher second or third number.
How are :not(), :is() and :has() scored?
These pseudo-classes take on the specificity of the most specific selector inside their parentheses — :not(.a, #b) scores as high as #b — rather than adding weight of their own. :where() is the exception: it always scores zero, however complex the selector list inside it is.
Does !important affect the specificity score?
No. !important overrides the normal cascade regardless of specificity, so it doesn't change a selector's score. The tool flags selectors that contain it as a separate note, since it's easy to overlook when comparing rules.
What happens with a comma-separated list like ".a, .b"?
With Split comma-separated lists on, each selector in the list is scored on its own line, matching how a browser actually evaluates them. Turn the option off to score the whole line as one combined selector instead.
Is my CSS uploaded anywhere?
No. Specificity is calculated entirely in your browser — the selectors you paste never leave your device.