CSS Specificity Calculator

Using the CSS Specificity Calculator

How specificity works

When two rules set the same property on the same element, the browser picks the one with the higher specificity. Specificity is compared as three numbers: first the count of ID selectors, then classes, attributes and pseudo-classes, then type selectors and pseudo-elements. A single ID beats any number of classes.

The special pseudo-classes

:is(), :not() and :has() take the specificity of their most specific argument. :where() always counts as zero, which makes it perfect for low-priority base styles that are easy to override. The universal selector * and combinators add nothing.

Ties and order

If specificity is equal, the rule that appears later in the stylesheet wins. Inline styles beat all selectors, and !important beats normal declarations; cascade layers (@layer) are compared before specificity.

Keeping specificity low

Long chains and IDs make CSS hard to override later, which leads to more !important and more frustration. Prefer single class selectors, use :where() for resets, and organise priorities with cascade layers.

Debugging a rule that will not apply

When a style refuses to apply, open the browser developer tools, inspect the element and look for your rule crossed out. Paste your selector and the winning selector into this calculator to see why one beats the other, then lower the winner's specificity or wrap base styles in :where() rather than reaching for !important.

Frequently asked questions