Skip to content
⚖️

CSS Specificity Checker

See the exact specificity of every selector in your stylesheet, ranked so you can find out why a rule is not winning.

How specificity is counted

Each selector gets three numbers, read as a, b, c: a counts IDs, b counts classes, attributes and pseudo-classes, and c counts element names and pseudo-elements. The universal selector * counts nothing.

Compare left to right, so (1, 0, 0) always beats (0, 9, 9). The two rules that surprise people are handled correctly here: :is() and :not() take the specificity of their most specific argument, while :where() adds nothing at all.

More in CSS Tools

View all →
CSS Gradient Generator Create beautiful CSS gradients CSS Minifier Strip whitespace and comments Box Shadow Generator Visual CSS box shadow builder CSS Beautifier Reformat messy CSS to be readable Text Shadow Generator Visual CSS text-shadow builder Border Radius Generator Visual border-radius builder

What Is CSS Specificity Checker?

The CSS Specificity Checker scores any selector and ranks competing selectors so you can see exactly which rule wins. Paste a list to find ties, spot duplicates, and understand why a style is - or is not - applying.

Who Uses the CSS Specificity Checker?

Front-end developers use it to debug cascade surprises, refactor overly specific selectors, and review pull requests with confidence.

How to Use the CSS Specificity Checker

  1. Paste one selector per line.
  2. Review each specificity score and ranking.
  3. Check the ties report for equal-weight conflicts.
  4. Refactor losers or add deliberate weight where needed.

Why Choose Our CSS Specificity Checker?

  • Standard a-b-c specificity scoring per selector
  • Ranked results reveal the winner instantly
  • Tie and duplicate detection for conflict audits

Try the CSS Specificity Checker above — it is free, fast, and works on any device. Bookmark this page to return whenever you need it.