In CSS, what does the :not() pseudo-class match, and how does :not(.a, .b) differ from :not(.a):not(.b)?

## The basic semantics `:not()` is the negation pseudo-class. It matches every element that the selector inside it does not match. `p:not(.intro)` matches paragraphs without that class; `li:not(:last-child)` matches every list item except the final one — the standard way to drop a trailing separator. ```css li:not(:last-child) { border-bottom: 1px solid #ddd; } ``` Because negation is over the whole element set, an unqualified `:not(...)` matches far more than people expect. `:not(.a)` on its own matches `html`, `body`, `head` elements, and every wrapper in the tree. Qualify it — `p:not(.a)` — unless you genuinely mean everything. ## The argument list Selectors Level 3 allowed only a single simple selector inside `:not()`. Level 4 widened it to a **selector list**, and to complex selectors containing combinators. The multi-argument form shipped in Chrome 88 and Firefox 84 around the turn of 2021 and is available in all current browsers. The negation applies to the list as a whole: ```css /* matches elements carrying neither class */ .item:not(.featured, .archived) { opacity: 1; } /* exactly equivalent, the pre-Level-4 spelling */ .item:not(.featured):not(.archived) { opacity: 1; } ``` Read it as "not (A or B)", which by De Morgan's law is "(not A) and (not B)" — the chained form. The wrong reading, "lacks at least one of A and B", would match an element that has `.featured` but not `.archived`; it does not. Complex arguments are also allowed: ```css /* a link that is not inside a nav */ a:not(nav a) { text-decoration: underline; } ``` ## The scope trap This is the mistake that costs real debugging time. `:not()` negates the compound selector it is attached to — a single element — not the whole ancestor chain. ```html <div class="page"> <div class="card"> <p>Still red.</p> </div> </div> ``` ```css div:not(.card) p { color: red; } ``` The paragraph *is* styled, because `div.page` matches `div:not(.card)` and the paragraph is its descendant. The descendant combinator asks only whether *some* ancestor qualifies. "A paragraph with no `.card` ancestor anywhere" is a different question, and the plain descendant form cannot express it — you would need a relational approach or a class applied at the point of exclusion. ## Specificity `:not()` itself adds nothing to the specificity count, but its argument does: the pseudo-class takes the specificity of its **most specific** argument. So `:not(.a)` weighs a class, `:not(#main)` weighs an ID, and `:not(p)` weighs a type. That is worth knowing before you reach for `:not(#something)` as a convenience, because you have just handed the rule ID-level weight that later rules must fight. ## Validity of the argument `:not()` is strict: if a browser cannot parse something inside it, the whole selector is invalid and the rule is dropped. That is the opposite of a forgiving list, and it is why the fallback-safe focus idiom `:focus:not(:focus-visible)` works — in a browser without support the rule vanishes rather than misfiring. Use that property deliberately when you want a rule to disappear on old engines, and avoid it when you were counting on partial application. ## Practical patterns ```css /* every item but the last: separators without a trailing one */ .menu > li:not(:last-child) { margin-inline-end: 1rem; } /* only decorate external links */ a[href]:not([href^="/"], [href^="#"]) { padding-inline-end: 1em; } /* reset spacing on the first block of a section */ section > *:not(:first-child) { margin-block-start: 1rem; } ``` The last one — often called the "owl" or stack idiom in its sibling-combinator form — is the most common production use: express spacing as "every element except the first" instead of adding a margin and then removing it again. ## Summary for the interview Say four things and you have covered it: `:not()` negates its argument; a comma-separated list is negated as a unit, equivalent to chaining; the negation applies to one compound, not to the ancestor chain; and the specificity of the most specific argument comes along with it.