Как работает CSS-псевдокласс :not

Development | Amber | Комментировать запись

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

Базовый синтаксис данного псевдокласса выглядит так:

элемент:not(<селектор>) { ... }

Читайте также: Создание псевдоклассов в CSS

Псевдокласс :not принимает в качестве селекторов: 

• Псевдоклассы
• Теги
• Идентификаторы
• Классы
• Селекторы атрибутов. 

Давайте посмотрим на первый пример. Данный код выберет все элементы p, которые не относятся к классу first-par: 

p:not(.first-par) {
  background-color: #E4AF4C;
}

Теперь взгляните на второй пример. Здесь мы выбираем псевдокласс ::before для всех его элементов (li), которые находятся в неструктурированном списке (ul), который не поддерживает ID toc или in-list:

ul:not(#toc, .in-list) li::before {
  /* Something stylish */
}

Третий пример показывает, как выбрать все элементы внутри статьи, кроме span: 

article *:not(span) {
  color: cornsilk;
}