What is CSS specificity and why does it matter?
When two CSS rules target the same element and the same property (e.g. `color`), the browser has to decide which one to apply. That is the cascade. The deciding factors: origin (author vs user), !important, selector specificity and source order.
Specificity is the numeric weight of a selector. We score it in four buckets (a, b, c, d): a = inline style, b = ID count, c = classes / attributes / pseudo-class count, d = elements / pseudo-element count. The selector `#header .card a` scores (0, 1, 1, 1). The selector `.menu .item.active` scores (0, 0, 3, 0). The first wins because of the ID.
Paste a selector and see the concrete number plus a breakdown of what contributed what. Compare mode shows which selector wins for the same property. CSS-block mode parses a full rule and surfaces conflicts.
How to use
- Pick a mode: Single selector (debug a specific one), Compare (a few selectors side by side), CSS block (a complete rule).
- Paste the selector or CSS code in the input.
- The tool shows specificity as (a,b,c,d) plus a breakdown - what scored what.
- Compare mode highlights the winner - the selector with the highest specificity wins the conflict.
- Hit "Copy" to copy the result (for a code review or docs).
When this helps
Real situations where specificity matters:
- Debug "why is my style not applied". Your rule `.button { color: red }` does not stick - chances are another rule has higher specificity. Paste both, see which wins.
- CSS refactor. Moving from legacy CSS to BEM / utility-first - you have to understand the current selector weights.
- Migrating to Tailwind. Tailwind uses mostly classes (specificity 0,0,1,0) - if your legacy rule is `#sidebar .menu a:hover` (0,1,2,1) then Tailwind loses. You either reach for `!important` or raise the Tailwind class specificity.
- Code review. A comment like "this selector has too much specificity, hard to override" - the tool gives concrete numbers for the discussion.
- Learning Selectors L4 - `:where()` is always specificity zero, `:is()` takes the highest of its arguments, so does `:has()`. Practice helps you remember.
- CSS-in-JS / Styled Components. Generated classes are low specificity (`.css-abc123`) - easily overridden by `#id` or `!important`. Good to know.
- Print stylesheets. Rules inside `@media print` can have the same specificity as the normal ones - source order decides.
To build a CSS gradient use the gradient generator. For box-shadow see box-shadow generator.