Псевдокласс :not()

Синтаксис – селектор:not(аргумент): правило применяется к элементам, которые не соответствуют ни одному селектору из аргумента. p:not(.fancy) – «параграфы без класса fancy», input:not([type="checkbox"]) – «все поля ввода, кроме чекбоксов». Возможности аргумента зависят от поколения спецификации.

:not() в Selectors Level 3 и Level 4 – в чём разница

Отсюда типовой вопрос: чем :not(a):not(b) отличается от :not(a, b)? По результату – ничем, оба означают «ни a, ни b». Цепочка – И-логика старого синтаксиса, работающая везде уже больше десяти лет; список – компактная запись Level 4. Ошибка появляется, когда список читают по аналогии с :is(): :not(.foo, .bar) – это «не (.foo ИЛИ .bar)», то есть исключаются оба класса сразу.

Второй важный нюанс: список аргументов :not() – unforgiving («непрощающий»), один невалидный или неподдерживаемый браузером селектор инвалидирует правило целиком. Это прямой контраст с forgiving-списками :is(), :where() и :has(). Приём для устойчивости – обернуть аргументы в :is():

/* База: все параграфы, кроме .fancy */
p:not(.fancy) { color: green; }

/* Level 4: ни .foo, ни .bar */
div:not(.foo, .bar) { color: red; }

/* То же самое в Level 3-синтаксисе */
div:not(.foo):not(.bar) { color: red; }

/* Отступы между элементами списка, кроме последнего */
li:not(:last-child) { margin-block-end: 8px; }

/* Unforgiving-список, защищённый через :is() */
p:not(:is(.foo, :unsupported-thing)) { color: green; }

Специфичность :not() устроена так же, как у :has(): сам псевдокласс ничего не добавляет, считается самый специфичный селектор из аргумента. #foo:not(#bar) выбирает те же элементы, что и просто #foo, но весит как два ID – перебить такое правило почти невозможно. Подробнее о подсчёте – в статье о специфичности CSS.