Instant • private • developer-friendly

CSS Specificity Calculator

Paste any CSS selector to see its specificity broken down into inline, ID, class and type weights, or compare two selectors to see which one wins.

0Inline style
0ID selectors
0Class / attr / :pseudo
0Type / ::pseudo
Specificity: (0,0,0,0) · read as (inline, id, class, type)

Compare two selectors

vs
Enter two selectors to compare.

🔒 Selectors are parsed locally and never uploaded.

How CSS specificity works

Specificity decides which CSS rule wins when several rules target the same element. It is expressed as four numbers: inline styles beat any number of ID selectors, ID selectors beat any number of classes, and classes beat any number of type selectors.

Four-part score

Counts are compared left to right: inline, then ID, then class/attribute/pseudo-class, then type/pseudo-element.

Combinators are free

Descendant, child (>), sibling (+, ~) combinators and the universal selector (*) add no weight.

Compare instantly

Use the comparison panel to see exactly which of two competing selectors will win.

CSS specificity calculator FAQ

How is CSS specificity calculated?

Specificity is a four-part score: inline styles, ID selectors, class/attribute/pseudo-class selectors, and type/pseudo-element selectors. Higher categories always outweigh any number of lower ones.

Does the universal selector or combinators count?

No. The universal selector (*) and combinators like >, +, ~ and space add no specificity weight.

What about :not() and :is()?

The negation and matches-any pseudo-classes count zero on their own, but the specificity of their most specific argument selector is added.

Is my CSS uploaded anywhere?

No. The selector is parsed entirely in your browser and never sent to a server.

Continue with the CSS Unit Converter, Color Contrast Checker, Regex Tester, or JSON Formatter. Browse all online tools.