UseFreeTools

CSS Specificity Calculator

Inspect selector specificity as an ordered tuple, with contributions and explicit comparison assumptions.

Inputs stay on your device No sign-up Free to use
How this works

The tool runs in this browser. Your file or text is not uploaded to UseFreeTools. Check this tool's limits for anything it may save on your device.

Privacy details

Showing an example. Edit to see your own.

One selector rule per line; comma branches are separate candidates. Up to 4,000 characters, 30 branches and 12 nested function levels. ASCII identifiers only; no escapes, namespaces, CSS rules or & nesting.

Processed in your browser. Your inputs stay on this device.

How to use CSS Specificity Calculator

  1. Enter supported selectors in source order.
  2. Inspect ID, class/attribute/pseudo-class and type contributions.
  3. Compare tuples under the stated matching and cascade assumptions.

Example: CSS Specificity Calculator

#main .item and div.item.

You add
Selectors in source order: #main .item div.item Compare assuming every branch matches with equal origin, importance and layer: on
You get
Candidate 1 wins the stated comparison; later source order breaks equal specificity. Sample rows: 1 | #main .item | #main | ID | 1-0-0 | ; 1 | #main .item | .item | Class | 0-1-0 | .

Options

Selector branches
Comma-separated branches are compared separately. Supported pseudo-selectors follow their documented specificity rules; unsupported syntax is refused.
Ordered tuple
Compare ID, class-like and type counts from left to right. Do not convert the tuple into a decimal score whose digits can carry into another column.

Supported inputs and limits

At most 4,000 characters, 30 top-level selector branches and 12 nested function levels. The documented ASCII grammar supports type, ID, class, attributes, listed pseudo-selectors and standard combinators; unsupported escapes, namespaces, nesting &, comments and shadow syntax are refused. Comparisons assume every selector matches the same element with equal origin, layer, importance and other cascade conditions. Source order breaks equal tuples; this is not a cascade engine.

Where your input is processed

This tool processes your input in this browser. Your text and files are not uploaded to UseFreeTools. Check this tool's limits for anything it may save on your device.

Specificity settles only one part of the cascade

The comparison assumes the selectors all match the same element under equal origin, layer, importance and other cascade conditions. A larger tuple alone cannot explain a rule from a different cascade layer or an !important declaration. Equal tuples can be decided by source order. Inspect the real matched rules in the browser when diagnosing a style conflict.

Questions about CSS Specificity Calculator

Does :where() add specificity?

No. Its contribution and those of its arguments are zero.

Why does an ID inside :is() count?

The functional pseudo-class uses the largest specificity among its supported selector arguments.

Does the largest tuple always win a real page?

No. Matching, importance, origins, cascade layers and other cascade rules must be resolved before a specificity comparison.

Project manager: Tony Hines · Content updated 4 October 2026 · Report a problem

Related tools

All tools in Developer