:not(): исключение элементов из выбора
Not выбирает элементы, которые не соответствуют указанному селектору или списку селекторов. Это фильтрация элементов, а не команда отменить уже применённый стиль.
Назначение
Not выбирает элементы, которые не соответствуют указанному селектору или списку селекторов. Это фильтрация элементов, а не команда отменить уже применённый стиль.
Как это работает
Общая часть селектора описывает кандидатов, а аргументы not — исключения. Специфичность учитывает наиболее специфичный аргумент. Исключение родителя не означает автоматическое исключение всех потомков.
Пример
<style>.topics li:not(.done){border-inline-start:3px solid #176b50;padding-inline-start:.5rem}.topics .done{color:#536458}</style>
<ul class="topics"><li class="done">Разметка проверена</li><li>Проверить CSS</li><li>Проверить клавиатуру</li></ul>Что должно получиться
Незавершённые пункты получают декоративную линию, а пункт done исключён из этого правила. Состояние дополнительно выражено текстом, поэтому линия не является единственным сообщением.
Граница применения и частая ошибка
Сложные цепочки отрицаний затрудняют сопровождение. Иногда положительный класс состояния точнее выражает задачу. Not не удаляет атрибуты, не меняет доступность элемента и не выключает его обработчики.
Самостоятельная проверка
Добавьте ещё один исключаемый класс и запишите список аргументов not. Проверьте вложенный список отдельно. Объясните, почему исключение одного уровня и исключение его потомков требуют разных селекторов.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.