Performance
  • Free forever
  • No sign-up
  • Instant results

CSS Specificity Calculator

Calculate the specificity score of any CSS selector and get the full (IDs, classes, elements) breakdown. Find out exactly why one rule is winning over another.

Specificity score (IDs, classes, elements)

When would you use this?

CSS specificity is one of the most common sources of 'why isn't my style applying?!' frustration. The browser uses a three-part score (IDs, classes/attributes/pseudo-classes, elements/pseudo-elements) to decide which rule wins when multiple rules target the same element. This calculator breaks down any selector you throw at it and tells you exactly where its weight comes from.

Common Questions

How is CSS specificity calculated?

Why should I avoid !important?