CSS Specificity Calculator and Selector Comparison
Work out the specificity of CSS selectors as (a, b, c) and compare several at once to see which rule wins. Enter one selector per line. When specificity is equal, the one written last wins. For text patterns, try the Regex Tester.
🔒 Runs in your browser · Your data is never sent to a server
Result
How to use
- Enter the selectors you want to compare, one per line (insert the sample to try it).
- Each line shows its specificity (a, b, c), and the winning selector is highlighted.
- If you use the nesting selector &, enter a parent selector so & counts as the parent specificity.
Notes
- Specificity is written (a, b, c): a counts ID selectors, b counts classes, attributes and pseudo-classes, and c counts type selectors and pseudo-elements. Columns are compared from the left and never carry over (eleven classes still lose to one ID).
- :is(), :not() and :has() take the highest specificity among their arguments, while :where() is always 0. :nth-child(... of S) adds 1 for the pseudo-class plus the highest specificity in S.
- Pseudo-elements such as ::before count in c like type selectors. The universal selector (*) and combinators (> + ~ and whitespace) count as 0.
- Comma-separated selectors are really independent rules, but this tool shows the highest value when you put them on one line.
- Inline style attributes outrank any (a, b, c) value, and declarations marked !important are compared in a separate step before specificity. This tool only calculates selector specificity and does not model either.
- The nesting selector & is calculated as the parent wrapped in :is(). A nested selector without & gets an implicit leading &, so the parent specificity is added.
- Cascade layers (@layer), source order and inheritance are not considered. Check the final result in your browser dev tools as well.
Glossary
Specificity
A weight that decides which CSS rule applies when several match the same element. It is counted per selector type as (a, b, c) and compared column by column from the left.
:where()
Like :is() it matches any of its arguments, but its specificity is always 0. It is often used so that default styles are easy to override.
Cascade
The process that decides the final value by comparing origin, !important, layers, specificity and source order in turn. Specificity is only one step of it.
FAQ
How is CSS specificity (a, b, c) counted?
a counts ID selectors, b counts classes, attribute selectors and pseudo-classes, and c counts type selectors and pseudo-elements. Columns are compared from the left with no carry-over. For example, #a is (1,0,0) and ul li.red is (0,1,2).
What is the specificity of :is(), :not(), :has() and :where()?
:is(), :not() and :has() take the highest specificity among their arguments. :where() is always 0 no matter what is inside. For example, :is(#a, .b) is (1,0,0) while :where(#a) is (0,0,0).
Which selector wins when specificity is equal?
The rule written later in the CSS wins. This tool treats lower lines as written later, so on a tie the lowest of the tied lines is marked as the winner.
Are inline styles and !important included?
No. Inline styles outrank selector specificity and !important is compared in a separate step, so neither is part of the calculation. The notes explain how they fit in.
When does a line show an invalid selector error?
When a bracket, attribute selector or quote is not closed, a # or . has no name, a combinator (> + ~) has nothing beside it, or the line contains characters such as braces. Only that line shows an error; the other lines are still calculated.
Share this page