:not()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2021.

Описание

Отрицательный CSS псевдокласс, :not(X) - функция, принимающая простой селектор X в качестве аргумента. Он находит элементы, не соответствующие селектору. X не должен содержать других отрицательных селекторов.

Примечание: С этого псевдокласса можно написать бесполезные селекторы. Например, :not(*) найдёт любой элемент, являющийся не любым, то есть правило не применится ни к одному элементу. Возможно переписать другие правила. Например foo:not(bar) найдёт тот же элемент, что и простой foo. Тем не менее специфичность первого выше. :not(foo){} найдёт что угодно, что не foo, включая <html> и <body>. Это селектор применяется только к одному элементу. Вы не можете использовать его, чтобы исключить всех родителей. Например, body :not(table) a применится к ссылкам внутри таблицы, тогда как <tr> будет соответствовать :not() части селектора.

Синтаксис

:not(selector) { style properties }

Пример

css
p:not(.classy) {
  color: red;
}
body :not(p) {
  color: green;
}

CSS выше и HTML ниже...

html
<p>Некоторый текст.</p>
<p class="classy">Какой-то другой текст.</p>
<span>Ещё текст</span>

Выведет это:

Спецификации

Specification
Selectors Level 4
# negation

Совместимость с браузерами

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Negation pseudo-class selector (:not())
Selector list argument

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support