Skip to content
Convertto

CSS Specificity Calculator — Why Your Rule Lost

Work out a selector's specificity and see which parts contributed what.

Specificity is three numbers compared left to right: IDs, then classes and attributes and pseudo-classes, then elements and pseudo-elements. Any number of classes loses to a single ID, because the comparison never carries — 0,99,0 is beaten by 1,0,0. Two things trip people up most: :where() contributes nothing at all, which makes it the tool for writing overridable defaults, while :is(), :not() and :has() take the specificity of their most specific argument. When two rules tie, the one written later wins.

Runs in your browser
Privacy
Runs entirely in your browser — nothing is uploaded
Cost
Free, unlimited, no sign-up

Frequently asked questions

Why does my class not override an ID?

Because specificity is compared column by column and never carries. A single ID is 1,0,0 and a hundred classes is still 0,100,0 — the first column decides it before the second is even read. Lower the ID selector rather than piling on classes.

What does :where() do to specificity?

It removes it. Everything inside :where() counts as zero, which makes it the right way to write defaults you expect people to override. :is() looks similar but takes the specificity of its most specific argument, so the two are not interchangeable.

What beats !important?

Another !important with higher specificity, or an !important in a later rule at the same specificity. In author stylesheets that is the top of the cascade — which is why reaching for it usually means starting an arms race with yourself.

How to use the css specificity calculator

  1. 1Enter or paste your selector.
  2. 2The result appears immediately — copy or download it.

Embed this tool

Put the working css specificity calculator on your own site. It runs in your visitors' browsers exactly as it does here — free, no account, nothing uploaded.

Share this tool

Related tools

nth-child Selector GeneratorBuild an :nth-child formula and see which items it selects out of a row.Z-Index & Stacking Context CheckerPaste your CSS and find the property that trapped the element in a stacking context.CSS Border Radius GeneratorDrag eight handles to shape every corner: elliptical radii, inverted corners and squircles.CSS Box Shadow GeneratorDesign a CSS box-shadow with live values for offset, blur, spread and colour.CSS Button GeneratorDesign a button and copy the CSS, including the hover, active and focus-visible states.CSS Clamp GeneratorGenerate fluid clamp() values that scale smoothly between two viewport widths.

Last updated

More css generators