CSS Specificity Calculator

Enter one or more comma-separated CSS selectors to see specificity scores as (IDs, classes/attributes/pseudo-classes, elements).

  • Runs entirely in your browser
  • No data stored or sent to a server
  • Free forever — no signup
  • Instant conversion

Input and Output

Use the interactive encoder and decoder on this page to process your text.

Learn more about CSS

How to Calculate CSS Specificity

CSS Specificity

When to Calculate Specificity

Debug cascade conflicts when two rules target the same element with equal importance. Compare selectors like #nav .item versus .nav .item.active before resorting to !important.

Specificity Tuple

Scores appear as (IDs, classes/attributes/pseudo-classes, elements/pseudo-elements). Compare left to right — a higher ID count beats any number of class selectors. Inline styles are not part of selector specificity calculations here.

Developer Tips

  • Source order breaks ties when specificity is equal
  • :where() zeroes specificity in modern browsers — this tool uses standard selector counting
  • Prefer lower-specificity selectors for maintainable stylesheets

Frequently asked questions

Does !important appear in the score?

No. This counts selector components only; !important is a separate cascade layer.

Can I compare multiple selectors?

Yes. Enter comma-separated selectors to score each one.