# 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.

**URL:** https://convertto.tech/t/css-specificity-calculator
**Category:** CSS Generators (https://convertto.tech/c/css-generators)
**Privacy:** Runs entirely in the browser; no upload
**Cost:** Free, no sign-up
**Last updated:** 2026-08-01

## Key facts

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

## How to use

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

## FAQ

### 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.

## Related tools

- [nth-child Selector Generator](https://convertto.tech/t/nth-child-generator): Build an :nth-child formula and see which items it selects out of a row.
- [Z-Index & Stacking Context Checker](https://convertto.tech/t/z-index-visualizer): Paste your CSS and find the property that trapped the element in a stacking context.
- [CSS Border Radius Generator](https://convertto.tech/t/border-radius-generator): Drag eight handles to shape every corner: elliptical radii, inverted corners and squircles.
- [CSS Box Shadow Generator](https://convertto.tech/t/box-shadow-generator): Design a CSS box-shadow with live values for offset, blur, spread and colour.
- [CSS Button Generator](https://convertto.tech/t/css-button-generator): Design a button and copy the CSS, including the hover, active and focus-visible states.
- [CSS Clamp Generator](https://convertto.tech/t/css-clamp-generator): Generate fluid clamp() values that scale smoothly between two viewport widths.
- [CSS Clip Path Generator](https://convertto.tech/t/css-clip-path-generator): Cut an element to a polygon, circle, ellipse or inset, and copy the clip-path.
- [CSS Multi-Column Generator](https://convertto.tech/t/css-columns-generator): Flow text into balanced columns with a rule between them.