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

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

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

Попробуйте

p:not(.irrelevant) {
  font-weight: bold;
}

p > strong,
p > b.important {
  color: crimson;
}

p > :not(strong, b.important) {
  color: darkmagenta;
}

<p>
  <b>Mars</b> is one of the most Earth-like planets. <b>Mars</b> day is almost
  the same as an Earth day, only <strong>37 minutes</strong> longer.
</p>

<p class="irrelevant">
  <b class="important">NASA</b>'s Jet <del>Momentum</del> Propulsion Laboratory
  is designing mission concepts to survive the <b>Venus</b> extreme temperatures
  and atmospheric pressure.
</p>

Синтаксис

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

Параметры

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

Описание

При использовании :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() делает правило более надёжным.

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

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

См. также

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