Выбор элементов без класса в CSS: селекторы :not, без printable

Быстрый ответ

Если вам нужно выбрать элементы, не обладающие определённым классом или атрибутом, воспользуйтесь псевдоклассом :not(). Пример для элементов без класса .example выглядит так:

:not(.example) { /* Стилезация агентов "под прикрытием" */ }

Если требуется выборка элементов без data-атрибута:

:not([data-attribute]) { /* Данные? Не, не слышали о них */ }

:not() отчётливо справляется с элементами, не имеющими вообще атрибут class или обладающими пустым:

:not([class=""]) { /* Даже пустой класс достоин внимания */ }

Этот подход позволяет избежать ненужных проблем с оформлением.

Спецификаторы селекторов и наследование

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

element:not(.specific-class) .child-element { /* Дети не обязаны наследовать всё */ }

Это правило определяет стили для .child-element, которые находятся в любых element без .specific-class. Это подчёркивает важность грамотного определения CSS спецификаторов и стратегии наследования.

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

:not() удобно комбинировать с другими селекторами для достижения большей гибкости. Это обычная практика в Angular приложениях:

input.ng-invalid:not(.ng-pristine) { /* Стили для инпутов, которые были внесены изменения, но остались неправильными */ }

Этот селектор применяется к невалидным и изменённым полям ввода — это идеально подходит для создания обратной связи в интерфейсе в реальном времени. Учтите, что стоит проверять совместимость с браузерами на сайте Caniuse.com и предусматривать альтернативные стили для старых браузеров.

Визуализация

Возьмем в качестве примера садовую вечеринку:

Список гостей, ожидающих входа в сад:

- Гости в 🎩: [Алиса, Боб, Кэрол, Дэйв]
- Гости с 🍀: [Алиса, Кэрол]

Наша задача: провести время со всеми, кто не преферирует 🎩!

.party :not(.tophat) {
  /* Эти гости получают дополнительный 🍹 */
}

То, как выглядит результат визуализации:

         🎩
👩‍🌾 [Боб, Дэйв]
🍹 [Алиса*, Кэрол*]

* Уже вовсю празднуют с 🍀

Итак, все гости собрались, кроме тех, кто предпочёл цилиндры! 🚫🎩🚶‍♂️

Практическое применение CSS

Реактивная стилизация

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

.button:not(.disabled) { /* Если кнопка не заблокирована, она выглядит более выразительно */ }

Такая методика отлично подходит для поддержания интерактивности интерфейса.

Подробнее об этом расскажет наш спикер на видео

Регулирование контроля над элементами

:not() можно комбинировать с другими псевдоклассами для точной настройки:

a:not(:hover):not(:active) { /* Ссылки, которые не в фокусе и на которые не наведён курсор */ }

С помощью этого регулируется равновесие между статическим и динамическим стилем без необходимости добавления дополнительных классов в HTML.

Улучшение читабельности кода

Верно использованный :not() повышает читаемость и понятность вашего CSS, что способствует более ясной визуальной составляющей вашего дизайна.

div:not(.ignore) > span { /* Избегаем лишнего доминирования div */ }

Етот селектор выбирает все элементы span, которые являются непосредственными потомками div без класса .ignore.

Полезные материалы

1. CSS :not() Селектор — MDN Web Docs — глубокое руководство от Mozilla по псевдоклассу :not().
2. Селекторы атрибутов — MDN Web Docs — подробное руководство о выборе элементов на основе атрибутов.
3. :not | CSS-Tricks — практическое руководство от CSS-Tricks по работе с :not().
4. Как выбрать элементы по атрибуту, содержащему определённую строку? — Stack Overflow — предложения и решения комьюнити по теме атрибутов CSS.
5. Селекторы четвёртого уровня — информация от W3C о новинках в обновлённых селекторах :not().