Skip to content

CSS Specificity Calculator

The CSS Specificity Calculator breaks any CSS selector into its specificity score: IDs (A), classes, attributes and pseudo-classes (B), and elements and pseudo-elements (C). Paste one selector per line to rank them and see which rule wins, with Selectors Level 4 rules for :is(), :not(), :has(), :where() and :nth-child(of S).

Selectors

Comma separated lists are split into separate selectors. A whole rule works too; everything from the first { is ignored.

Ranked, most specific first

SelectorA, B, C
Wins
  • #aID +1,0,0
  • .bClass +0,1,0
  • :hoverPseudo-class +0,1,0
  • pType +0,0,1
  • ::beforePseudo-element +0,0,1
122
Tie: the one later in the stylesheet wins.101
Tie: the one later in the stylesheet wins.101
Tie: the one later in the stylesheet wins.021
Tie: the one later in the stylesheet wins.021
Tie: the one later in the stylesheet wins.021
010
003

A = IDs, B = classes, attributes and pseudo-classes, C = elements and pseudo-elements. Compare A first, then B, then C. Select a selector to see its parts.

Results
1,2,2  #a .b:hover > p::before
1,0,1  :is(#main, .content) h2
1,0,1  #nav a
0,2,1  li:nth-child(2n + 1 of .featured)
0,2,1  button:not(.primary, .ghost)[disabled]
0,2,1  .nav a.active
0,1,0  :where(.card) .title
0,0,3  ul li a

How to use

  1. Enter one or more CSS selectors, one per line. Comma separated lists are split automatically.
  2. Read the ranked list: the most specific selector is at the top and marked as the winner.
  3. Select any selector to see how each part (ID, class, pseudo-class, type) adds to its score.
  4. Copy the results to share in a code review or bug report.

Why use this tool?

Specificity bugs are among the most time-consuming CSS issues to debug, and modern pseudo-classes make them harder: :is() and :not() take the specificity of their most specific argument, while :where() always counts zero. This calculator applies those rules exactly, shows a part-by-part breakdown and tells you when two selectors tie and source order decides, so you can fix the cascade instead of reaching for !important.

Frequently asked questions

What is the CSS Specificity Calculator?

An online tool that parses the CSS selectors you enter and calculates their specificity as (A, B, C): ID selectors; class, attribute and pseudo-class selectors; and type and pseudo-element selectors. It ranks several selectors so you can see which one wins.

How is CSS specificity scored and why does the order matter?

Specificity is three numbers, (A, B, C). A counts ID selectors, B counts class, attribute and pseudo-class selectors, and C counts type and pseudo-element selectors. A higher A always beats any B or C, whatever the source order, so #nav a (1,0,1) beats .nav a.active (0,2,1) even if the class rule comes later in the stylesheet. Only when all three numbers are equal does the later rule win.

How do :is(), :not(), :has() and :where() count?

:is(), :not() and :has() take the specificity of their most specific argument, so :is(#a, .b) counts as an ID. :where() always counts zero, which makes it useful for easy-to-override defaults. :nth-child(2n of .item) counts as one pseudo-class plus its selector list, and pseudo-elements like ::before count as types.

Is it free?

Yes, the CSS Specificity Calculator is free with no signup required. It runs entirely in your browser, so nothing you paste is uploaded. Built by the Canvas Builder team.

Stop tweaking snippets. Build the whole site

This tool fixes one piece. Canvas Builder builds the entire page from a single prompt: sections, copy, styling, and responsive layout. You own the code.

Start building freeBuild a site from this