CSS Specificity Calculator

a,b,c,d - CSS selectors - cascade

Enter one or more CSS selectors and get the specificity score (a,b,c,d) with a per-component breakdown. Compare two selectors to see which one wins the cascade.

Selectors to calculate
Specificity analysis
A - Inline styles
style="..." directly in HTML. Value: 1,0,0,0
B - ID
#id - One ID per element. Value: 0,1,0,0
C - Classes / Attr / Pseudo
.class [attr] :hover :focus. Value: 0,0,1,0
D - Elements / Pseudo-el.
div p h1 ::before ::after. Value: 0,0,0,1
Selectors comparison
Examples

CSS specificity is one of the most misunderstood concepts in front-end development: knowing why one style overrides another — and why !important should be a last resort — is what separates a maintainable stylesheet from one riddled with accumulated overrides.

This CSS specificity calculator lets you:

  • Analyse simple and complex selectors (classes, IDs, pseudo-classes, pseudo-elements, attributes)
  • View the score in (a, b, c, d) format with a breakdown by selector type
  • Compare two selectors to determine which takes priority in a conflict
  • Identify high-specificity selectors that could create scalability problems

Indispensable when working on WordPress themes with styles coming from plugins, parent/child themes or Gutenberg blocks, where specificity conflicts are common. Useful during code reviews or when inheriting a legacy project for refactoring.

How to read CSS specificity

  • A represents inline styles.
  • B counts ID selectors.
  • C counts classes, attributes, and pseudo-classes.
  • D counts elements and pseudo-elements.

Comparison is lexicographic from left to right: first A, then B, then C, and finally D.