CSS Specificity Calculator

Specificity (a, b, c) for any selector.

Runs in your browser. Nothing is uploaded — your input is processed on this device and discarded when you close the tab.

CSS Specificity Calculator

How to use this tool

  1. Type a CSS selector, such as '#nav .menu li a:hover'.
  2. Press Generate for the counts of IDs, classes and elements and the (a, b, c) specificity.
  3. Compare selectors: the one with the higher value in the leftmost differing position wins.

Worked example

For '#nav .menu li a:hover': IDs = 1 (#nav), classes = 2 (.menu and :hover), elements = 2 (li and a), so specificity is (1, 2, 2) and the comparison score is 1 x 100 + 2 x 10 + 2 = 122.

What this tool does not do / Limits

Single selectors only (no comma lists, which are counted as one string), and the argument of :not() is not counted separately; attribute selectors count as classes, and pseudo-elements count as elements, following the standard rules.

Frequently asked questions

What does (a, b, c) mean?

a counts ID selectors, b counts class selectors, attribute selectors and pseudo-classes, and c counts element selectors and pseudo-elements. Inline styles and !important sit outside this count.

Is 122 a real specificity value?

No. The score 122 is only a comparison shorthand used here (a x 100 + b x 10 + c). Real specificity is the tuple (1, 2, 2); always compare tuples position by position.

Related tools

JSON Studio

Format, validate, minify, query and compare JSON in your browser, with precise line-and-column errors.

Live

Regex Tester

Test patterns against sample text with match highlighting, capture groups and a safe one-second timeout.

Live

Security Header and DNS Checker

Check HSTS, CSP and other security headers, TLS details, and DNS/email authentication records (SPF, DKIM, DMARC).

Live