./prontouso.com

DESIGN UTILITIES

CSS Specificity Calculator

Enter one or two CSS selectors to see their specificity, shown as ids-classes-types, and which one would win a conflict.

Tool statusRuns in your browser
Preview

Inputs

Results

Selector A
1-1-1
Selector B (optional, to compare)
0-1-4

A wins

How it works

  1. Enter your input

    Fill in the values, paste your text, or upload the file this tool works with.

  2. See results instantly

    Most tools update live as you type; a few use a single button. Either way, the result appears right on this page.

  3. Use your results

    Copy, download, or share what the tool produces — you're always in control of the output.

Privacy and processing — Runs locally in your browser. This tool does not upload your input.

What is CSS Specificity Calculator?

Enter one or two CSS selectors to see their specificity, shown as ids-classes-types, and which one would win a conflict.

UNDERSTAND THE TOOL

How CSS specificity is calculated

How it's calculated

IDs count the most, then classes, attribute selectors, and pseudo-classes, then element type selectors and pseudo-elements. Combinators like space, >, and ~ don't affect specificity.

Limitations

  • `:not()`, `:is()`, and `:has()` are each counted as one pseudo-class rather than looking inside their argument.
  • `:where()` always counts as zero, matching the CSS specification.

Worked example

`#main .container p` scores 1 id, 1 class, 1 type (1-1-1), while `nav ul li.active a` scores 0 ids, 1 class, 4 types (0-1-4) — the first selector wins despite matching fewer elements by name.

Specificity example

Weight
IDs - classes/attributes/pseudo-classes - types/pseudo-elements

#app .card button:hover

One ID, two class-level parts, and one type selector gives 1-2-1.

Calculation notes

All calculation runs in your browser; the selectors you enter are never sent anywhere.

Frequently Asked Questions

Why does a later rule sometimes win even with equal specificity?

When specificity ties, the rule that appears later in the stylesheet (or has higher CSS layer priority) wins.

Does inline style show up here?

No — inline `style` attributes always outrank any selector-based specificity, regardless of what this calculator shows.

Does specificity depend on the order of parts in a selector?

No — only which kinds of selectors appear and how many of each, not the order they're written in.

Does it fully parse :is(), :not(), and :has()?

No. This implementation counts each as one pseudo-class, except :where(), which contributes zero. The full CSS spec looks inside those arguments.

Related Tools