Skip to content
M2TOOLKIT

Popular tools

Menu

CSS Specificity Calculator

Find out why one CSS rule beats another.

  • Free
  • No sign-up
  • Nothing is sent or stored
  1. 1#nav .menu > li:hover a122Wins
  2. 2:is(#main, .content) p::first-line102
  3. 3.btn.btn-primary020
  4. 4a:not(.external)011
  5. 5ul li a003
  6. 6:where(.card) h2001

Specificity is compared column by column: IDs, then classes / attributes / pseudo-classes, then elements / pseudo-elements. A tie goes to the rule that comes last. :where() adds nothing; :is(), :not() and :has() take their most specific argument. Inline styles and !important beat all of these. (1,2,2 is the highest here.)

The calculation happens instantly in your browser. The numbers you enter are not sent to our servers or saved.

How to use the CSS Specificity Calculator

  1. Paste selectors, one per line.
  2. Read each score as IDs, classes, elements.
  3. The list is ranked — the top selector wins.

What does this tool do?

When two rules target the same element, the one with higher specificity wins, compared column by column. This calculator follows Selectors Level 4: :where() counts zero, :is(), :not() and :has() take their most specific argument, and pseudo-elements count as elements. Inline styles and !important override specificity entirely.

Everything runs in your browser — nothing you paste is uploaded.

Why use it?

  • Selectors Level 4 rules.
  • Ranked results.
  • Handles selector lists.

Privacy

The calculation happens instantly in your browser. The numbers you enter are not sent to our servers or saved. There's no account to create and nothing to install.

Last reviewed by the M2Toolkit team.

Other tools people use alongside the css specificity calculator.