CSS :not() — как работает
CSS :not(): принцип работы, корректный синтаксис, практический сценарий, ограничения, ошибки и актуальная совместимость.
Суть темы
Назначение «:not()» раскрывается через задачу «выбрать элемент по состоянию, положению или отношению к другим узлам». Псевдокласс :not() сопоставляет элемент с определённым состоянием или структурным условием. Для воспроизводимой проверки «:not()» используйте пример в печатной версии длинного справочного материала и наблюдайте победившую декларацию во вкладке Computed.
Рабочий критерий для «:not()»: не полагайтесь только на hover и сохраняйте эквивалентное состояние клавиатурного фокуса. Если результат «:not()» меняется вместе с посторонним условием, пример ещё не изолирован.
Синтаксис :not()
Пример «:not()» оставляет только контекст, необходимый для области «псевдоклассы». Измените одно значение и проследите результат в браузере.
.button:not() {
outline: 2px solid #2563eb;
outline-offset: 3px;
}Как работает :not()
Чтобы объяснить работу «:not()», проследите путь от структуры и входного значения до отображения или поведения. Селектор пересчитывается браузером при изменении состояния или структуры DOM. Контрольная точка для «:not()» — изменение при prefers-reduced-motion.
Проверка в проекте
- Не полагайтесь только на hover и сохраняйте эквивалентное состояние клавиатурного фокуса; результат относится непосредственно к «:not()».
- Проверить вычисленное значение в DevTools и источник победившего правила при разборе «:not()».
- Проверьте «:not()» в печатной версии длинного справочного материала через победившую декларацию во вкладке Computed и запишите наблюдаемое изменение.
Критерий выбора «:not()» — предсказуемая работа в заявленном контексте. Для «:not()» подтвердите её через победившую декларацию во вкладке Computed и соблюдите ограничение: проверяйте и светлую, и тёмную цветовую схему.
Практика с :not()
Создайте два варианта «:not()» на контрольной странице: корректный и с одной типичной ошибкой. Сравните варианты «:not()» через победившую декларацию во вкладке Computed и объясните различие.
Сценарий: в печатной версии длинного справочного материала.
Ошибки при работе с :not()
Контекст
Состояние :not() не должно быть единственным способом увидеть важное действие или информацию — это предметный риск для «:not()».
Устойчивость
Использование !important вместо разбора каскада при использовании «:not()».
Доступность
Подмена семантики визуально похожим div или span; для «:not()» проверьте это отдельно.
Поддержка :not()
Для «:not()» таблица собрана из закреплённой версии MDN Browser Compatibility Data. Указанная версия браузера показывает первое заявленное появление базовой поддержки «:not()»; окончательное решение принимайте по аудитории конкретного проекта.
Спецификация: источник 1.
Вопросы о :not()
Как понять, что «:not()» выбрано правильно?
«:not()» выбрано правильно, когда оно решает задачу «выбрать элемент по состоянию, положению или отношению к другим узлам», сохраняет результат в печатной версии длинного справочного материала и проходит предметную проверку: не полагайтесь только на hover и сохраняйте эквивалентное состояние клавиатурного фокуса.
Нужен ли запасной вариант для «:not()»?
Запасной вариант для «:not()» нужен, если целевой браузер или режим не обеспечивает выбранное поведение. Без улучшения «:not()» должно сохранять смысл, содержимое и основное действие.
Спецификации и источники
Синтаксис и статус проверяются по HTML Living Standard, спецификациям CSS и MDN Browser Compatibility Data. Примеры и объяснения подготовлены для этого сервиса.