Skip to content
Free Tab Toolsnothing uploaded

Runs in your browser · Last updated 7 September 2026

Free CSS Specificity Calculator

Free CSS specificity calculator. IDs, classes, types — :where() is zero, :is()/:not()/:has() take the max argument. Browser tool — nothing is uploaded.

Counts IDs, then classes / attributes / pseudo-classes, then types and pseudo-elements. :where() is zero; :is() / :not() / :has() take the most specific argument. :nth-child(2n+1 of .foo) adds the of list. :host(.foo) and ::cue-region() add their argument. Inline style= is not a selector.

(IDs, classes, types)

1,1,3

IDs

1

Classes / attrs

1

Types

3

Notation

How to use this tool

  1. Paste one CSS selector.
  2. Read the (IDs, classes, types) triple.
  3. Compare two selectors by pasting them one after the other.

Worked example

#nav ul li a.active is 1,1,3 — one ID, one class, three types. Pair with the CSS clamp calculator when you are writing the actual rule.

Frequently asked questions

What do the three numbers mean?
(IDs, classes/attributes/pseudo-classes, types/pseudo-elements). #nav .on a is 1,1,1. Inline style is a fourth column this page does not count.
Does :where() count?
No. :is(), :not(), and :has() take the most specific argument inside. :nth-child() / :nth-of-type() / :lang() count as one pseudo-class — An+B tokens are not types, but :nth-child(An+B of S) / :nth-last-child() add S. :host() / :host-context() add their argument on top of the host pseudo-class. ::slotted() / ::cue() / ::cue-region() add their argument. Universal *, combinators, and namespace prefixes (svg|a) add nothing.
Comma lists?
Each selector in a list has its own specificity. Paste one at a time.
Uploaded?
No.