CSS псевдокласс :not() — Learn CSS

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

На этой странице объясняется, что делает :not(), когда его использовать, как он влияет на специфичность и какие подводные камни встречаются — с редактируемыми примерами.

Что такое `:not()`

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

Селектор по тегу (например, p, span)
Селектор по классу (например, .element)
Селектор по ID (например, #header)
Псевдоклассовый селектор (например, :last-child, :first-of-type)
Селектор по атрибуту (например, [type="text"])
Универсальный селектор (*)

В Selectors Level 3 аргументом мог быть только один простой селектор. Selectors Level 4 расширил его до списка селекторов, разделённых запятыми, а также до составных и сложных селекторов, поэтому в современных браузерах можно писать :not(.a, .b) или :not(ul li.first).

Когда использовать

Используйте :not(), когда короче описать то, что нужно исключить, чем перечислять всё, что нужно включить:

Стилизовать каждый пункт списка, кроме последнего: li:not(:last-child).
Стилизовать каждую ссылку, которая не является внешней: a:not([target="_blank"]).
Добавлять отступы между соседними элементами без последнего отступа: .item:not(:first-child) { margin-top: 1rem; }.
Отключить стилизацию для одного варианта: .btn:not(.btn-ghost) { background: #8ebf42; }.

Важные замечания

Селектор :not() работает с псевдоклассами, но не поддерживает псевдоэлементы.
Само ключевое слово :not() не добавляет специфичности — только его аргумент. Поэтому :not(.foo) имеет ту же специфичность, что и .foo (0, 1, 0), а голый :not(p) весит столько же, сколько p (0, 0, 1). Это делает :not() менее затратным, чем эквивалентный дополнительный класс, что может удивить при разрешении конфликтов стилей.
:not(.foo) совпадает с чем угодно, что не является .foo, включая <html> и <body>. Всегда используйте контекст, например ul li:not(.foo), чтобы стили не распространялись на весь документ.
Селектор :not() применяется к каждому элементу, не соответствующему аргументу, а не только к одному элементу.
Пустой :not() — :not() без содержимого — недействителен, и всё правило игнорируется.

Версия

Selectors Level 3

Selectors Level 4

Синтаксис

Синтаксис CSS :not()

selector:not(argument) {
  css declarations;
}

Пример псевдокласса :not():

Пример кода CSS :not()

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        color: #666;
      }
      :not(p) {
        color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>:not() selector example</h2>
    <p>Lorem Ipsum is simply dummy text</p>
    <p>Lorem Ipsum is simply dummy text</p>
    <div>Lorem Ipsum is simply dummy text</div>
    <a href="https://www.w3docs.com" target="_blank">Link to W3docs</a>
  </body>
</html>

Попробуйте сами »

В следующем примере представлен ненумерованный список с единственным классом на теге <li>.

Пример псевдокласса :not() с тегом `<li>`:

Ещё один пример кода CSS :not()

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .text-blue {
        color: blue;
      }
      ul li:not(.text-blue) {
        color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>:not() selector example</h2>
    <ul>
      <li>List item 1</li>
      <li class="text-blue">List item 2</li>
      <li>List item 3</li>
    </ul>
  </body>
</html>

Попробуйте сами »

Передача списка селекторов (Selectors Level 4)

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

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      li {
        color: #8ebf42;
      }
      li:not(.muted, .active) {
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <h2>:not() with a selector list</h2>
    <ul>
      <li>Highlighted item</li>
      <li class="muted">Muted item</li>
      <li class="active">Active item</li>
      <li>Highlighted item</li>
    </ul>
  </body>
</html>

Это эквивалентно более многословному старому варианту li:not(.muted):not(.active), который можно использовать при необходимости поддержки очень старых браузеров.

Связанные селекторы

CSS Selectors — полный справочник типов селекторов.
:first-child и :last-child — используйте их вместе с :not() для управления отступами.
:nth-child() — ещё один способ выбрать подмножество дочерних элементов.

Практика

Что делает псевдокласс :not() в CSS?

Он представляет элемент, не представленный его аргументомОн используется для указания конкретного атрибута элементаОн выбирает каждый элемент, который не является указаннымОн является противоположностью псевдокласса :has

Что такое :not()