CSS Specificity Calculator

Paste CSS selectors to see their specificity as (a, b, c): IDs, then classes, attributes and pseudo-classes, then elements and pseudo-elements. Each part is highlighted and explained, :is(), :not(), :has(), :where() and :nth-child(… of S) follow Selectors Level 4, and a ranking shows which rule wins.

This tool runs entirely in your browser.

Loading tool…

How to use the CSS Specificity Calculator

1Type or paste selectors, one per line. Selector lists separated by commas are split into separate entries, and pasted { declarations } are ignored.
2Read each selector’s (a, b, c) score and the parts that count in each column, colour-coded and labelled.
3Use the ranking to see which selector is most specific; equal scores are broken by source order.
4Load the Level 4 example to see how :is(), :not(), :has() and :where() are counted.

What is the CSS Specificity Calculator?

When several rules set the same property on an element, the browser picks the one with the highest specificity, compared column by column. Column A counts ID selectors; column B counts classes, attribute selectors and pseudo-classes; column C counts type selectors and pseudo-elements. The universal selector * and combinators (space, >, +, ~) count nothing. A single ID beats any number of classes.

Selectors Level 4 added rules for functional pseudo-classes: :is(), :not() and :has() take the specificity of their most specific argument, :where() always counts zero, and :nth-child(2n of .item) counts as one pseudo-class plus its most specific selector. Old single-colon pseudo-elements like :before still count as elements. Inline style attributes and !important sit above all selector specificity.

Frequently asked questions

What is the specificity of #app .card:hover > button?

(1, 2, 1): one ID (#app), one class plus one pseudo-class (.card and :hover), and one element (button). The > combinator adds nothing.

What happens when two selectors have the same specificity?

The one that appears later in the stylesheet (or in a later stylesheet) wins. Cascade layers and !important are checked before specificity.

Why use :where()?

It always has zero specificity, so styles inside it are easy to override. That makes it ideal for resets and library defaults.

Does :not() add specificity?

The :not() itself adds nothing, but its most specific argument does: :not(#nav) counts as an ID and :not(.a, p) counts as one class.

Is the CSS Specificity Calculator free and private?

Yes. The CSS Specificity Calculator is free, needs no account, and runs entirely in your browser. What you type is never sent to a server or stored.

All developer tools →