LangStop

CSS Specificity Calculator — Calculate Selector Priority

CSS Specificity Calculator

Paste CSS selectors — or a whole stylesheet — and click Specificity to see each selector's specificity as (IDs, classes, elements), with a plain-English breakdown. Everything runs in your browser.

How specificity works

When two rules set the same property on the same element, the browser applies the one with the higher specificity. Specificity is three counts, compared left to right:

Column Counts Examples
A — IDs ID selectors #main
B — classes classes, attribute selectors, pseudo-classes .btn, [type="text"], :hover
C — elements type selectors and pseudo-elements h2, li, ::before

The universal selector * and combinators ( , >, +, ~) add nothing.

Examples (actual results from this tool)

Selector Specificity
h1 (0, 0, 1)
a:not(.ext) (0, 1, 1)
ul li.active (0, 1, 2)
.btn.primary (0, 2, 0)
.nav a:hover (0, 2, 1)
#main .card > h2 (1, 1, 1)
* (0, 0, 0)

:not(), :is() and :has() count as their most specific argument, so a:not(.ext) scores like a.ext. :where() always counts as zero.

Reading the score

The tool also prints a single score (A×100 + B×10 + C) for quick scanning. Treat it as a shorthand: browsers compare the columns one at a time, so one ID beats any number of classes — (1, 0, 0) wins over (0, 15, 0) even though "150" looks bigger than "100".

Pasting a stylesheet

If the input contains rules, the tool analyses the selectors in front of each { and splits selector lists at commas. Declarations, comments and @media lines are ignored, and the rules inside a media query are still analysed.

Fixing specificity problems

  • Prefer classes over IDs for styling; an ID makes a rule hard to override without another ID or !important.
  • Keep selectors short. .card-title is easier to override than #page .content .card h2.
  • Use :where() in base styles and resets, so they never win against component styles.
  • Use cascade layers (@layer) to control order between whole groups of styles instead of increasing specificity.