CSS Specificity Calculator

How specificity is counted

A selector's specificity is three numbers: inline styles, then IDs, then classes, attributes and pseudo-classes, then elements and pseudo-elements. They are compared left to right, and a higher number in an earlier position wins regardless of the later ones. This is the crucial part: specificity is not a sum. A single ID beats any number of classes, because the comparison never reaches the class column.

Source order only breaks ties

When two selectors have identical specificity, the one declared later wins. That is why moving a rule to the bottom of a stylesheet sometimes fixes things and sometimes does nothing at all: it only helps when specificity is already equal.

The universal selector and combinators count for nothing

The asterisk, and the combinators for child, sibling and descendant, add zero specificity. A long descendant chain is not automatically more specific than a short one; only the compound selectors within it count.

Where and is are the useful modern tools

The where pseudo-class always contributes zero specificity, which makes it ideal for default styles that should be trivially overridable. The is pseudo-class takes the specificity of its most specific argument, so the two are not interchangeable. Using where for base layers is the cleanest way to avoid specificity escalation in a design system.

Important is not a specificity level

It sits outside the calculation entirely, overriding any specificity in the same origin. Its only real counter is another important declaration with higher specificity, which is how stylesheets end up with important on nearly everything. Treat any need for it as a signal that the selector strategy has failed, with the honest exception of overriding third-party CSS you do not control.

Cascade layers change the picture

Layers now take precedence over specificity: a rule in a later layer beats a more specific rule in an earlier one. That inverts the usual mental model and is the modern answer to specificity wars, letting a low-specificity rule in your overrides layer beat a framework's high-specificity selector without any important at all.

Related tools

• JSON Formatter — Format and beautify JSON in your browser. Pinpoints syntax errors by line and column, flags unsafe integers, and never uploads your data to a server.
• JSON Validator — Validate JSON syntax with precise line and column errors, and check documents against a JSON Schema. Runs locally in your browser, nothing uploaded.
• Regex Tester — Test regular expressions against sample text with live match highlighting, capture groups and flag control. Runs entirely in your browser.
• HTML Minifier — Minify HTML by removing comments and redundant whitespace, without breaking inline elements or pre blocks. Runs entirely in your browser.