Paste a selector and see exactly which parts count, coloured by tier — or compare two selectors and find out which one actually wins.
Read the specificity lessonPaste a full rule (selector { … }) and everything from the { onward is ignored automatically.
header .nav > ul li.active a:hover::afterSpecificity is never added up into one number — (0, 5, 0) beats (0, 0, 100) every time. Compare the first number; if it's tied, compare the second; only if that's also tied does the third number matter.
:not(), :is(), :has()
These don't add their own weight — the whole pseudo-class is replaced by the specificity of its most specific argument. :is(#a, .b) scores exactly like #a alone; the .b branch is simply ignored for scoring.
:where()
Always contributes zero, even with an ID inside — :where(#a) scores (0, 0, 0). It exists specifically for writing selectors that never fight the cascade.
Combinators
Descendant ( ), child (>), sibling (+, ~) combinators and the universal selector (*) contribute nothing on their own — only the simple selectors on either side of them count.
Outside specificity entirely
An inline style="…" attribute and !important both override specificity completely rather than out-scoring it — a single-class rule marked !important beats every un-marked ID selector on the page, however high its (a, b, c) is.