Как работает :not() в CSS — исключаем элементы из стилей правильно

Доступно в Baseline в статусе «Widely Available» с 2023-07-21

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

Зачем нужен :not()

Представьте, что у вас десятки ссылок на странице, и все они должны быть красными — кроме ссылок в футере. Раньше приходилось делать сложные селекторы вроде:

a {
  color: red;
}
footer a {
  color: inherit;
}

Теперь можно проще:

a:not(footer a) {
  color: red;
}

Но важнее — это читаемость и поддерживаемость. Использование :not() позволяет явно выразить: «применить стиль ко всем, КРОМЕ».

Простой пример

a:not(.no-red) {
  color: red;
}

Этот селектор задаёт красный цвет всем ссылкам, кроме тех, у которых есть класс no-red.

Несколько селекторов внутри :not()

С CSS4 можно передавать список селекторов в :not() через запятую:

button:not(.primary, .danger) {
  opacity: 0.5;
}

Это значит: применить стиль ко всем кнопкам, кроме тех, у которых класс primary или danger.

Важно: эта возможность поддерживается не во всех старых браузерах. Для уверенности — проверяйте на Can I use.

Вложенные селекторы

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

ul li:not(:last-child) {
  margin-bottom: 10px;
}

Так отступ снизу получат все элементы списка, кроме последнего.

Комбинирование с другими псевдоклассами

:not() можно комбинировать с hover, nth-child, disabled и другими:

input:not(:disabled):hover {
  border-color: blue;
}

Этот код применяет рамку только к активным полям ввода при наведении.

Лучшие практики

• Не усложняйте: если правило стало нечитабельным — лучше пересмотреть структуру HTML или классы.
• Не злоупотребляйте вложенными :not(), чтобы не усложнять отладку.
• Всегда тестируйте в браузерах, особенно если используете списки селекторов.

Отличие от других способов

Вместо :not() вы можете попробовать JS или ручную фильтрацию классов, но CSS-подход лучше по производительности и проще в поддержке. В современных проектах :not() — стандартный инструмент для выборки с исключениями.

Заключение

Псевдокласс :not() — это ваш фильтр в мире CSS. Он позволяет явно исключать ненужные элементы из выборки и писать стили точнее и лаконичнее. Поддерживается всеми современными браузерами и особенно полезен при работе с дизайн-системами и компонентами.

Больше обзоров веб-функций — в телеграм-канале HTML Academy.

Нашли ошибку или опечатку? Напишите нам.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.