CSS specificity calculator
Paste CSS selectors, one per line or separated by commas, to see the specificity of each as three numbers: IDs, classes and types. The tool tells you which selector is heaviest, or if several tie.
Runs in your browser: nothing you enter is sent anywhere.
How to use it
- Type or paste selectors, one per line. Commas inside a line split it into separate selectors.
- Read the score
(a,b,c) next to each one.
- Switch to Heaviest first to sort them.
How it works
For #nav .item a:hover the tool counts one ID (#nav), two classes (.item and the pseudo-class :hover) and one type (a), giving (1,2,1). ul li::before has two types and a pseudo-element, giving (0,0,3). :is(#a, .b) p takes the larger argument, #a, plus p, giving (1,0,1). :nth-child(2n+1) counts as one class; with of S it also adds the heaviest selector in S.
Tips
- Prefer lowering specificity (a class, or :where()) to winning with !important.
- Selectors with an unclosed bracket or parenthesis show
(?) instead of a score.
- Browsers also accept
:before and :after with one colon; they count as pseudo-elements.
Frequently asked questions
How is specificity counted?
Three numbers, compared left to right. The first counts ID selectors, the second counts classes, attribute selectors and pseudo-classes, and the third counts type selectors and pseudo-elements. Universal selectors and combinators add nothing.
Is (0,10,0) heavier than (1,0,0)?
No. The columns are compared in order and do not carry over, so a single ID beats any number of classes. Older write-ups that add them into one base-10 number get this wrong.
How are :is(), :not() and :has() counted?
Each takes the specificity of its most specific argument, as defined in Selectors Level 4. :where() always counts as zero, which is why it is used for low-weight defaults.
What about !important and inline styles?
They sit outside this score. Inline styles beat any selector, and !important declarations are considered in an earlier step of the cascade. This tool scores selectors only.
What happens when specificity is equal?
The rule that comes later in the source wins, provided the cascade layer, origin and importance are the same.