AnyTool
Your files never leave your device. All processing happens locally in your browser.

How to calculate CSS selector specificity?

Use the AnyTool CSS Specificity Calculator. Paste any selector to get its (a, b, c) score with a per-part breakdown, or paste many selectors (or a whole stylesheet) to rank them and see which one wins. It handles Selectors Level 4 correctly and runs 100% in your browser with no upload.

  • Get the (a, b, c) tuple with color-coded a=IDs, b=classes/attributes/pseudo-classes, c=types/pseudo-elements
  • Correct :is(), :not(), :has() and :where() math where most clones get it wrong
  • Rank N selectors live, see the winner, and learn how to beat any selector
  • 100% in your browser - no upload, no signup, works offline

What is

CSS Specificity

CSS specificity is the weight the browser gives a selector, written as an (a, b, c) tuple of ID, class/attribute/pseudo-class, and type/pseudo-element counts, compared column by column to decide which conflicting rule wins.

Developer Tools

Related terms

CSS CascadeSelectors Level 4Specificity Tuple!important Override

Frequently Asked Questions

No. Everything is computed in your browser and nothing is uploaded.

No. AnyTool computes specificity as a pure in-browser string calculation, so your selectors and pasted CSS never leave the page. There is no server, no CDN call, and the tool works offline.

Yes. :is/:has/:not take their most specific argument and :where always counts zero.

Yes. The hand-rolled Selectors Level 4 engine recurses into functional pseudo-classes: :is(), :has() and :not() take the specificity of their most specific argument, while :where() always contributes zero. Many competitor clones get this wrong.

Yes. It ranks selectors, marks the winner, and explains how to beat any of them.

In Compare and rank mode it sorts every selector by the (a, b, c) tuple, highlights the winner, models the !important, inline-style and source-order tiers, and tells you exactly what to add to beat any selector.

No. It only analyzes selectors or CSS you paste in, not remote URLs.

No. Because reading a third-party site's CSS would require a server or proxy that CORS blocks, the tool analyzes only what you paste. Paste a selector list or a whole stylesheet and it splits the rules and ranks them locally.

Detailed Explanation

How It Works

How CSS Specificity Is Scored

CSS specificity is expressed as three columns, written a-b-c. Column a counts ID selectors, column b counts classes, attribute selectors and pseudo-classes, and column c counts type selectors and pseudo-elements. The browser compares the columns left to right and never sums them into a single number, so a single ID always outranks any number of classes.

  • a = ID selectors
  • b = classes, attributes, pseudo-classes
  • c = types and pseudo-elements
  • Columns are compared left-to-right, never summed
Technical Details

Selectors Level 4 Functional Pseudo-Classes

AnyTool uses a hand-rolled, dependency-free engine that recurses into functional pseudo-classes the way the CSS Selectors Level 4 spec requires. :is(), :has() and :not() take the specificity of their most specific argument, while :where() always contributes zero. The universal selector and combinators add nothing, attribute selectors count as one class-level, and pseudo-elements count as one type-level.

  • :is/:has/:not use their most specific argument
  • :where() always contributes zero
  • Universal selector and combinators contribute zero
  • Attribute selectors count one b, pseudo-elements count one c
Limitations

Cascade Tiers and Pasted-Input Limit

Specificity is only one layer of the cascade. The tool lets you flag !important and inline styles per row to model the override tiers that sit above the a-b-c tuple, and notes that ties are broken by later source order. Because it runs fully in the browser, it analyzes only the selectors or CSS you paste; it cannot fetch a remote site's stylesheet by URL since CORS blocks reading third-party CSS without a server.

  • !important and inline tiers sit above the a-b-c tuple
  • Source order breaks ties of equal specificity and tier
  • Analyzes only pasted selectors or CSS, not remote URLs
  • No server or proxy, so cross-origin stylesheet fetch is not possible
AnyTool CSS Specificity Calculator vs typical online alternatives
CapabilityAnyToolTypical alternative
Privacy / no uploadYes - 100% client-sideOften ad-laden hub pages
PriceFreeFreemium/paywall or marketing funnel
Correct :is/:has/:where mathYes - Selectors Level 4 engineFrequently incorrect
Rank many selectors + winnerYes - N-way ranking with how-to-beatOften single selector only
!important / inline tier modelingYes - per-row togglesRarely modeled
Live recompute + CSV/JSON exportYesOften button-gated, no export

AnyTool also works offline and supports dark mode and mobile out of the box.