#447 · Developer Tool

CSS Selector Specificity Calculator

Calculate CSS selector specificity as `(ID, class, type)` values and compare selectors before adding overrides. The calculator understands comma-separated selector lists and the specificity rules for `:is()`, `:not()`, `:has()`, and zero-weight `:where()`. Results are sorted only in the report; the original order stays visible for source review.

Developer Input

Selector weight analysis
Ad space

How to use this developer tool

  1. Paste source text or load the representative sample.
  2. Adjust the available parsing option when the tool provides one.
  3. Select Calculate Specificity or press Ctrl/Cmd + Enter.
  4. Review the summary, issues, and copy-ready output before using it.

What this developer tool does

Selectors are split at top-level commas. Functional pseudo-classes are evaluated recursively: is, not, and has take the most specific argument, while where contributes zero. IDs, class-like selectors, pseudo-elements, and type selectors are then counted.

Selectors are split at top-level commas. Functional pseudo-classes are evaluated recursively: is, not, and has take the most specific argument, while where contributes zero. IDs, class-like selectors, pseudo-elements, and type selectors are then counted.

This is a static specificity calculator, not a full CSS parser. Highly unusual escaped identifiers may need confirmation in browser developer tools.

Example

Input

#app .card[data-state="open"] > h2::before
:is(.notice, #urgent) a:hover
:where(header, footer) nav > a.active
article:has(> img.hero) .caption

Expected result

Run the sample to see a structured report generated by the same processing logic used for pasted input.

Use cases

  • Review front-end source during a code migration.
  • Create a structured handoff for documentation or QA.
  • Catch input-specific issues before committing generated output.

Tips for reliable output

  • Paste the smallest complete fragment that reproduces the case.
  • Use the sample once to confirm the expected input shape.
  • Review warnings instead of treating a clean report as a guarantee.
  • Keep the original source in version control before replacing it.
  • Test generated output in the target browser or application.

Processing details

Selectors are split at top-level commas. Functional pseudo-classes are evaluated recursively: is, not, and has take the most specific argument, while where contributes zero. IDs, class-like selectors, pseudo-elements, and type selectors are then counted.

This is a static specificity calculator, not a full CSS parser. Highly unusual escaped identifiers may need confirmation in browser developer tools.

Frequently asked questions

How does :where() affect CSS specificity?

The :where() pseudo-class and all of its arguments contribute zero specificity.

How are :is(), :not(), and :has() calculated?

Each contributes the specificity of its most specific selector argument.

Are inline style attributes included in the calculation?

No. The input is a selector list; inline styles belong to a separate cascade origin and are not selectors.

What does a specificity value such as 1-2-1 mean?

It represents one ID, two class-like selectors, and one type or pseudo-element selector.

Does higher specificity always win in CSS?

No. Cascade layers, origin, importance, scope, and source order can take precedence before or after specificity comparisons.

Output fields

FieldMeaning
SummaryCount and outcome of the current run
InterpretationWarnings and practical review guidance
ExportsCopy-ready output plus CSV or JSON when available

Explore HTML, CSS & JavaScript Tools

Browse related browser-based utilities for inspecting and transforming front-end source.

View category hub