BYTETOOLS

CSS Specificity Calculator

Calculate CSS selector specificity as (A,B,C) per Selectors Level 4, including :is(), :not(), :has() and :where(), and rank selectors to see which rule wins.

Ranked by specificity (most specific first)

#SelectorABCSpecificity
1#sidebar .widget a:hover1211,2,1
2#main1001,0,0
3li:nth-child(2n of .item)0210,2,1
4.btn.btn-primary0200,2,0
5.nav li a0120,1,2
5input[type="text"]::placeholder0120,1,2
6:where(#app) .card0100,1,0
7ul li a0030,0,3
8a0010,0,1

Which rule wins?

#sidebar .widget a:hover wins with 1,2,1, beating #main at 1,0,0.

A = ID selectors · B = class, attribute and pseudo-class selectors · C = type selectors and pseudo-elements. The columns are compared left to right and never carry over, so one ID always beats any number of classes. Inline style attributes and !important sit outside this scale entirely.

What is the CSS Specificity Calculator?

Paste one or more CSS selectors and this calculator scores each one as an (A, B, C) triple following the Selectors Level 4 specification.

  • Full Selectors Level 4 scoring, verified against the specification's own worked examples
  • :is(), :not(), :has() and :matches() take their most specific argument
  • :where() correctly contributes zero specificity
  • Handles attribute selectors with quoted values, namespaces, escapes and pseudo-elements
  • Ranks every selector and explains which one wins in plain English
  • Live calculation in your browser — nothing is uploaded

How to use the CSS Specificity Calculator

  1. 1

    Paste your CSS selectors, one per line; a trailing { … } block is ignored automatically.

  2. 2

    Comma-separated selector lists are split and scored individually, as CSS itself does.

  3. 3

    Read the A, B and C columns and the combined specificity for each selector.

  4. 4

    Check the ranking to see which rule wins, and whether anything ties.

  5. 5

    Adjust a selector and watch the score update live.

About the CSS Specificity Calculator

Paste one or more CSS selectors and this calculator scores each one as an (A, B, C) triple following the Selectors Level 4 specification. ID selectors count towards A, class, attribute and pseudo-class selectors towards B, and type selectors and pseudo-elements towards C.

The tricky modern cases are handled properly: :is(), :not() and :has() take the specificity of their most specific argument, :where() contributes nothing at all, and :nth-child() with an "of S" clause adds the specificity of S on top of the pseudo-class itself. The universal selector and combinators correctly score zero.

Selectors are ranked most-specific first with tied selectors sharing a rank, and a plain-English summary tells you which rule wins — or explains that source order decides when there is a tie. Everything is parsed locally in your browser.

Frequently asked questions

How is CSS specificity calculated?

Count three things separately: ID selectors give you A, class, attribute and pseudo-class selectors give you B, and type selectors and pseudo-elements give you C. The columns are compared left to right and never carry over, so a single ID always beats any number of classes.

Does :where() affect specificity?

No, and that is exactly why it exists. :where() always contributes zero, so you can write broad selectors that are trivially easy to override later. Its sibling :is() behaves the opposite way and takes the specificity of its most specific argument.

What specificity does :not() have?

The pseudo-class itself adds nothing, but its argument counts. So :not(.foo) scores the same as .foo, and #s12:not(FOO) scores (1,0,1) — one ID plus the type selector inside the negation.

What happens when two selectors have the same specificity?

Source order decides: the rule declared later in the stylesheet wins. The tool tells you when the top selectors tie so you know to look at declaration order rather than hunting for a specificity difference.

Where do !important and inline styles fit in?

They sit outside the (A,B,C) scale entirely. Inline style attributes beat any selector, and !important declarations beat normal ones regardless of specificity, with author !important losing only to user and user-agent !important in the cascade.

Do combinators like > and + add specificity?

No. Combinators and the universal selector * all score zero. Only the compound parts on either side of a combinator contribute to the total.

Related tools