CruxDevCruxDev Tools Studio Prompts
css Utility • Zero-Server Privacy • 100% Client-Side

CSS Specificity Calculator

Calculate the specificity of any CSS selector as (a, b, c), compare several selectors side by side and see which rule wins, including :is(), :not(), :where() and :has().

Overview

Calculates the specificity of CSS selectors as three numbers, (A, B, C), for IDs, classes and types, and shows which of several selectors wins the cascade. It follows Selectors Level 4, so :is(), :not() and :has() take their most specific argument, :where() counts as zero, and :nth-child(2n of .item) adds its selector. A per-part breakdown explains each score.

How It Works

Enter one selector per line; a comma-separated list on one line is split into separate selectors, since each one is weighed on its own. A table shows the A, B and C counts and a breakdown of every ID, class, attribute, pseudo-class, type and pseudo-element with its contribution. The highest selector is marked wins and repeated at the top. Sort by specificity orders the list, and the results can be copied or downloaded as text. Syntax errors such as an unclosed bracket are reported per line.

Step-by-Step Usage Guide

  1. Type or paste the selectors you want to compare, one per line.
  2. Read the A, B and C columns for each selector in the table.
  3. Check the breakdown to see which part contributes each point.
  4. Turn on Sort by specificity to rank the selectors from strongest to weakest.

Technical Specifications & Standards

Specificity is compared column by column from the left: one ID, (1, 0, 0), beats any number of classes, so (1, 0, 0) is higher than (0, 15, 0). Column A counts ID selectors; column B counts classes, attribute selectors such as [type="text"] and pseudo-classes such as :hover; column C counts type selectors such as div and pseudo-elements such as ::before. The universal selector *, combinators and the nesting selector & add nothing. The legacy single-colon forms :before, :after, :first-line and :first-letter are pseudo-elements and count in C. :is(), :not() and :has() contribute the specificity of their most specific argument instead of counting as a pseudo-class, which is why a:not(.x, #y) is (1, 0, 1). :where() always contributes zero, the reason it is popular for resettable library styles. :nth-child() and :nth-last-child() count as one pseudo-class plus the selector after of. Quoted attribute values and escaped characters such as .md\:flex are parsed correctly, so a dot or hash inside a string is not counted.

Targeted Use Cases

  • Working out why a style rule is ignored even though it comes later in the stylesheet.
  • Choosing between :is() and :where() when writing a reusable component library.
  • Reviewing a pull request that adds an ID selector to an existing style sheet.
  • Teaching how the cascade decides between competing CSS rules.

Notes & Gotchas

  • Keep selectors low and flat, ideally a single class, so overrides do not need escalation.
  • Wrap base or reset styles in :where() so any later class can override them.
  • Avoid ID selectors in shared CSS; one ID outweighs any number of classes.
  • Remember that !important, inline styles and cascade layers are decided before specificity.

Frequently Asked Questions

How is CSS specificity calculated?

Count the IDs for A, the classes, attributes and pseudo-classes for B, and the element types and pseudo-elements for C. Compare A first, then B, then C; the first column that differs decides which selector wins.

What is the specificity of :is() and :not()?

They take the specificity of the most specific selector in their argument list. :is(#a, .b) is (1, 0, 0) because #a is the strongest argument, and the pseudo-class itself adds nothing.

Why does :where() have zero specificity?

The Selectors Level 4 spec defines :where() as always contributing (0, 0, 0), whatever is inside it. That lets frameworks ship default styles that any single class can override.

Do 11 classes beat one ID?

No. Columns are compared separately and never carry over, so (1, 0, 0) beats (0, 11, 0) and even (0, 100, 0). Only another ID, an inline style or !important beats an ID selector.

What wins when two selectors have equal specificity?

The rule that appears later in the stylesheet order wins, as long as both are in the same cascade layer and have the same importance. The calculator marks the first of tied selectors, so check source order yourself.

Related tools

  • CSS ↔ JS Style Object Converter - Convert CSS rules to JavaScript/React style objects and back — handles camelCase, vendor prefixes, and numeric values.
  • Code Minifier (CSS/JS/HTML) - Minify CSS, JavaScript, or HTML in your browser — strips comments and collapses whitespace safely, showing the size saved.
  • PX to REM Converter - Convert px to rem and back for any root font size, with a quick reference table and a converter that rewrites every px value in a CSS snippet.
  • CSS Variables / Token Exporter - Define a design token palette (colors, spacing, radii, fonts) and export as CSS custom properties.
  • CSS Multi-Column Layout Generator - Generate CSS multi-column layouts with column-count, column-gap, column-rule, and column-span controls with live preview.
  • CSS Gradient Generator - Design linear and radial CSS gradients with a visual editor. Supports multiple color stops.