CSS Specificity Calculator

Paste a CSS selector to see its specificity score and understand why it wins or loses against another rule.

Try:

What is CSS specificity?

When more than one CSS rule matches the same element, the browser has to pick a winner. Specificity is the scoring system it uses. Every selector gets a score with four parts, from most to least powerful:

  1. Inline styles — a style="..." attribute on the element itself.
  2. IDs — #header
  3. Classes, attributes & pseudo-classes — .btn, [type="text"], :hover
  4. Elements & pseudo-elements — div, ::before

These aren't added together like normal numbers — a single ID always beats any number of classes, and a single class always beats any number of elements. Think of it like comparing "1 gold coin" to "100 silver coins": gold wins regardless of quantity, until you compare gold to gold.

Tips for fixing specificity conflicts
  • Avoid IDs in your CSS selectors when you can — they're hard to override later.
  • Prefer adding a class over reaching for !important.
  • Keep selectors short. .card .title beats .card alone, but a long chain like .page .content .card .header .title becomes a maintenance trap.
  • :where() is a handy escape hatch — it matches like a normal selector but always has zero specificity, so it's easy to override later.
  • If two selectors tie exactly, the one that appears later in the stylesheet wins.