:not()

Псевдокласс :not() CSS псевдокласса представляет элементы, которые не соответствуют списку селекторов. Поскольку он предотвращает выбор определённых элементов, он известен как псевдокласс отрицания.

Попробуйте

Псевдокласс :not() имеет ряд особенностей, хитростей и неожиданных результатов, о которых следует знать перед его использованием.

Синтаксис

Псевдокласс :not() требует список селекторов, то есть список одного или более селекторов, разделённых запятыми, в качестве аргумента. Список не должен содержать псевдоэлемента, но допускаются любые другие простые, составные и сложные селекторы.

:not(<complex-selector-list>) {
  /* ... */
}

Описание

При использовании псевдокласса :not() существуют несколько необычных эффектов и результатов, которые следует учитывать:

С помощью этого псевдокласса можно записать бесполезные селекторы. Например, :not(*) соответствует любому элементу, который не является элементом, что очевидно бессмысленно, поэтому соответствующее правило никогда не будет применено.
Этот псевдокласс может повысить специфичность правила. Например, #foo:not(#bar) будет соответствовать тому же элементу, что и более простой селектор #foo, но имеет большую специфичность, состоящую из двух селекторов id.
Специфичность псевдокласса :not() заменяется специфичностью самого специфичного селектора в его аргументе, разделённом запятыми, что обеспечивает ту же специфичность, как если бы он был записан с использованием :not(:is(argument)).
:not(.foo) будет соответствовать любому элементу, который не является элементом .foo, включая <html> и <body>.
Этот селектор будет соответствовать всему, что не является "X". Это может быть неожиданно, когда используется с комбинаторами потомков, так как существует несколько путей для выбора целевого элемента. Например, body :not(table) a по-прежнему будет применяться к ссылкам внутри <table>, так как <tr>, <tbody>, <th>, <td>, <caption> и т. д. могут соответствовать части селектора :not(table). Чтобы избежать этого, можно использовать body a:not(table a) вместо этого, что будет применяться только к ссылкам, которые не являются потомками таблицы.
Можно отрицать несколько селекторов одновременно. Пример: :not(.foo, .bar) эквивалентно :not(.foo):not(.bar).
Если какой-либо селектор, переданный псевдоклассу :not() , недопустим или не поддерживается браузером, всё правило будет аннулировано. Эффективным способом преодоления этого поведения является использование псевдокласса :is(), который принимает допускающий список селекторов. Например, :not(.foo, :invalid-pseudo-class) аннулирует всё правило, но :not(:is(.foo, :invalid-pseudo-class)) будет соответствовать любому (включая <html> и <body>) элементу, который не является .foo.

Примеры

Использование :not() с валидными селекторами

Этот пример демонстрирует несколько примеров использования :not().

HTML

<p>I am a paragraph.</p>
<p class="fancy">I am so very fancy!</p>
<div>I am NOT a paragraph.</div>
<h2>
  <span class="foo">foo inside h2</span>
  <span class="bar">bar inside h2</span>
</h2>

CSS

.fancy {
  text-shadow: 2px 2px 3px gold;
}

/* <p> elements that don't have a class `.fancy` */
p:not(.fancy) {
  color: green;
}

/* Elements that are not <p> elements */
body :not(p) {
  text-decoration: underline;
}

/* Elements that are not <div>s or `.fancy` */
body :not(div):not(.fancy) {
  font-weight: bold;
}

/* Elements that are not <div>s or `.fancy` */
body :not(div, .fancy) {
  text-decoration: overline underline;
}

/* Elements inside an <h2> that aren't a <span> with a class of `.foo` */
h2 :not(span.foo) {
  color: red;
}

Результат

Использование :not() с невалидными селекторами

Этот пример демонстрирует использование :not() с невалидными селекторами и как предотвратить аннулирование.

HTML

<p class="foo">I am a paragraph with .foo</p>
<p class="bar">I am a paragraph with .bar</p>
<div>I am a div without a class</div>
<div class="foo">I am a div with .foo</div>
<div class="bar">I am a div with .bar</div>
<div class="foo bar">I am a div with .foo and .bar</div>

CSS

/* Invalid rule, does nothing */
p:not(.foo, :invalid-pseudo-class) {
  color: red;
  font-style: italic;
}

/* Select all <p> elements without the `foo` class */
p:not(:is(.foo, :invalid-pseudo-class)) {
  color: green;
  border-top: dotted thin currentcolor;
}

/* Select all <div> elements without the `foo` or the `bar` class */
div:not(.foo, .bar) {
  color: red;
  font-style: italic;
}

/* Select all <div> elements without the `foo` or the `bar` class */
div:not(:is(.foo, .bar)) {
  border-bottom: dotted thin currentcolor;
}

Результат

Правило p:not(.foo, :invalid-pseudo-class) невалидно, поскольку содержит невалидный селектор. Псевдокласс :is() принимает допускающий список селекторов, поэтому правило :is(.foo, :invalid-pseudo-class) валидно и эквивалентно :is(.foo). Таким образом, правило p:not(:is(.foo, :invalid-pseudo-class)) валидно и эквивалентно p:not(.foo).

Если :invalid-pseudo-class был валидным селектором, первые два правила выше по-прежнему были бы эквивалентны (последние два правила демонстрируют это). Использование :is() делает правило более надёжным.

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

Спецификация
Selectors Level 4 # отрицание

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`:not`	1	12	1	9.5	3.1	18	4	10.1	2	1.0	2
`selector_list`	88	88	84	74	9	88	84	Нет	9	15.0	88

См. также

Псевдоклассы
Псевдоклассы и псевдоэлементы
Другие функциональные псевдоклассы CSS:
Как :not() объединяет несколько селекторов на блоге MDN (2023)

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/:not