(1, 2, 1) #main .nav > a:hover
About CSS Specificity Calculator — Compare Selectors
CSS specificity decides which rule wins when several selectors target the same element. The browser scores every selector as an (a, b, c) triple — IDs first, then classes, attributes and pseudo-classes, then element types and pseudo-elements — and the higher triple takes the cascade. When two of your rules fight and the "wrong" one applies, specificity is almost always the reason.
This free CSS specificity calculator scores any selector instantly and ranks several selectors against each other so you can see exactly which one beats the others. It handles the tricky cases too: `:not()`, `:is()` and `:has()` take the specificity of their inner selector, `:where()` always counts as zero, and the universal selector `*` and combinators add nothing.
Everything runs entirely in your browser. Nothing you paste is uploaded or stored, so it works offline and keeps your markup private.
Features
- Score any selector as an (a, b, c) specificity triple
- Rank multiple selectors to see which one wins the cascade
- Correctly forwards :not(), :is() and :has() to their inner selector
- Counts the universal selector and combinators as zero — fully offline
How to use
- Paste one or more CSS selectors into the input pane — one per line.
- Read the (a, b, c) triple shown beside each selector.
- Check the ranked list to see which selector is most specific.
- Copy the result or clear the input to start over.
Frequently asked questions
How is CSS specificity calculated?
Specificity is an (a, b, c) triple. "a" counts ID selectors (#id), "b" counts classes, attribute selectors and pseudo-classes (.btn, [type], :hover), and "c" counts element types and pseudo-elements (div, ::before). The triples are compared left to right, so any ID outranks any number of classes.
Does !important affect specificity?
No. !important is not part of the specificity score — it sits above the whole specificity comparison as a separate cascade tier. This calculator scores selector specificity only; an !important declaration would win regardless of the triples shown here.
How do :not(), :is() and :has() count?
:not(), :is() and :has() do not add specificity for the pseudo-class itself. Instead they contribute the specificity of the most specific selector inside their parentheses. :where() is the exception — it always contributes zero, which makes it handy for low-specificity defaults.
Why does my more specific selector still lose?
If two selectors have the same specificity, the one that appears later in the stylesheet wins. Specificity is only the first tiebreaker after origin and !important; source order resolves exact ties.
Related tools
Everything runs locally in your browser — your input is never uploaded.