CSS Specificity Calculator

CSS Specificity Calculator

Paste one selector per line and the tool scores each one, sorts them by cascade order, and explains where the weight comes from.

• Every selector is counted as an (a, b, c) tuple: a counts id selectors, b counts classes, attributes and pseudo-classes, and c counts type selectors and pseudo-elements. a is compared first, then b, then c.
• :is(), :not(), :has(), :host(), :host-context() and the of list of :nth-child() take the specificity of their most specific argument, plus the pseudo-class itself for :host() and :host-context(). ::slotted() counts as one pseudo-element plus its argument. :where() always contributes nothing, even when its argument is an id.
• The universal selector *, combinators (space, >, +, ~, ||) and the nesting selector & add no weight.
• Selector lists split by commas are scored as separate selectors. Blank lines and /* comments */ are ignored, and a trailing !important is flagged separately.

Reading the result

The list is sorted from the rule that wins to the one that loses. Rules that share the same weight are marked as tied, and because specificity cannot separate them, the later rule wins in source order.

!important and inline styles are not part of (a, b, c): !important outranks inline styles, which in turn outrank plain selectors. Turn on Compare against inline style to add the (1,0,0,0) inline entry to the ranking.

Everything runs locally in your browser. Nothing is uploaded and no URL parameters are written.