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

Псевдокласс :not() соответствует элементам, которые не совпадают ни с одним из селекторов в списке.

Он также известен как псевдокласс отрицания. Это функциональный селектор псевдокласса, который принимает список селекторов в качестве аргумента и соответствует любому элементу, не совпадающему с этим аргументом. В спецификации Selectors Level 3 он принимает только простые селекторы. Selectors Level 4 допускает составные или сложные селекторы. Поддерживаемые аргументы включают:

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

Важные примечания

Селектор :not() работает с псевдоклассами, но не поддерживает псевдоэлементы.
Специфичность :not() определяется самым специфичным селектором в его аргументе. Например, :not(.foo) имеет ту же специфичность, что и .foo (0, 1, 0).
:not(.foo) соответствует чему угодно, кроме .foo, включая <html> и <body>.
Селектор :not() применяется к любому элементу, который не совпадает с аргументом, а не только к одному конкретному элементу.

Версия

Selectors Level 3

Selectors Level 4

Синтаксис

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

css

selector:not(argument) {
  css declarations;
}

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

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

html

<!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>

Try it Yourself »

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

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

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

html

<!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>

Try it Yourself »

Практика

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

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

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

Важные примечания ​

Версия ​

Синтаксис ​

Пример использования псевдокласса :not(): ​

Пример использования псевдокласса :not() с тегом <li>: ​