CSS Specificity Calculator
Calculate the specificity score of any CSS selector.
How CSS specificity works
When two rules target the same element, the browser uses specificity to decide which wins. It is a three-part score: a counts ID selectors, b counts classes, attribute selectors, and pseudo-classes, and c counts element types and pseudo-elements. The groups are compared from left to right, so a single ID (1,0,0) beats any number of classes (0,9,0). Inline styles and !important sit above all of this. The universal selector and combinators add nothing, :where() is always zero, and :is(), :not(), and :has() take the specificity of the single most specific selector in their argument list — not the total. So :not(.a, #b) scores (1,0,0), the same as a bare #b, and the .a contributes nothing.
A comma makes a selector list, which has no single score: the browser matches each selector separately and each carries its own specificity. Paste a comma-separated list here and every member is scored individually, with the one that would win the cascade marked.
Writing the selectors themselves? Test patterns with the regex tester or format a stylesheet with the CSS formatter.
Built and maintained by Meet Shah · Last updated
What this tool is used for
- Working out why one rule is beating another.
- Comparing two selectors before choosing one.
- Checking whether a selector needs to be that specific.
- Explaining a cascade problem to someone else.
- Auditing a stylesheet for selectors that will be hard to override.
Frequently Asked Questions
- What do the three numbers mean?
- IDs, then classes/attributes/pseudo-classes, then elements and pseudo-elements. They are compared left to right and a higher group always wins outright — 1,0,0 beats 0,99,0, because the columns never carry.
- How is a selector list scored?
- Each member is scored separately, because a list has no single specificity — the cascade evaluates each selector on its own. The headline figure is the member that would win, and every member is shown so you can see which one that is.
- How much does :not() add?
- Nothing itself; its argument contributes. With several arguments the specificity is the highest one, not their sum — `:not(.a, #b)` scores 1,0,0 from the id, not 1,1,0. The same rule applies to `:is()` and `:has()`.
- Why does :where() score zero?
- By design — it takes the specificity of its arguments and discards it. That makes it the tool for writing defaults a consumer can override with a single class, which is why design systems use it around reset selectors.
- Do inline styles and !important appear here?
- No, they sit outside the three-number scheme. An inline style outranks any selector, and `!important` outranks that, with the order reversing between author and user-agent origins. Specificity only settles ties within one origin and layer.
- Is the weight figure a real thing?
- It is a convenience, not part of the specification. Treating the tuple as base-10 digits works until a selector has ten of something in one column — which is why the comparison here is done on the tuple, and the weight is shown only as a rough guide.
Common errors and gotchas
- Forgetting that specificity is only one of several tie-breakers, after origin and importance.
- Assuming `:not()` adds specificity itself, when its argument does instead.
- Treating `:where()` like `:is()`, when one contributes zero specificity and the other does not.
- Escalating specificity to win an argument, which makes the next override harder.
- Ignoring that inline styles and `!important` sit outside the ordinary comparison.