Skip to main content

Web Tools

CSS Specificity Calculator

Compare CSS selector specificity scores.

CSS Specificity Calculator tool

Loading tool…

Jump to a section

About This Tool

CSS specificity explains why one rule wins over another when multiple selectors match the same element. This calculator breaks a selector into the common inline, ID, class, and element score so you can compare selectors before changing a stylesheet. It is useful when debugging styles, reducing overly strong selectors, reviewing component CSS, or teaching how the cascade works without needing to open browser developer tools.

How To Use It

  1. Paste one CSS selector or a comma-separated selector list.
  2. Review each specificity score in inline, ID, class, element order.
  3. Compare selectors from left to right: IDs beat classes, classes beat elements, and later source order matters only after a tie.
  4. Use the notes for modern functional pseudo-classes such as :is(), :not(), :has(), and :where().

Examples

Class versus ID

.button has specificity 0,0,1,0, while #button has 0,1,0,0. The ID selector wins even if it has fewer total parts.

Attribute and pseudo-class selectors

button[data-state=open]:hover counts one element plus two class-column selectors, so its score is 0,0,2,1.

Modern selector helpers

:where(.card #title) contributes zero specificity, while :is(.card, #title) contributes the strongest argument, which is the ID selector.

Useful Notes

How the score is counted

The displayed score is inline styles, IDs, classes/attributes/pseudo-classes, then elements/pseudo-elements. Inline styles are shown as the first column for comparison, but pasted selectors normally start with zero in that position.

Cascade still matters

Specificity is not the whole cascade. !important, cascade layers, origin, inheritance, and source order can still change which declaration applies when selectors match the same element.

Local and private

Selectors are analyzed in your browser. The tool does not fetch websites, inspect DOM nodes, execute CSS, or send selector text to a server.

Parsing scope

The calculator handles common selectors and modern :is(), :not(), :has(), and :where() behavior. For unusual vendor-specific syntax, verify important production decisions in browser developer tools as well.

FAQ

What does a CSS specificity score like 0,1,2,1 mean?

It means zero inline styles, one ID selector, two class-column selectors such as classes or attributes, and one element-column selector. Comparison happens from left to right.

Does a bigger total number always win?

No. Specificity is lexicographic. One ID beats many classes because the ID column is compared before the class column.

Why does :where() add no specificity?

CSS defines :where() as zero specificity so authors can write helpful structural selectors without making them harder to override.

Can this tell me which CSS rule wins on a real page?

It helps compare selector weight, but a real page can also depend on cascade layers, !important, stylesheet order, inheritance, and whether each selector actually matches the element.