Псевдокласс :has() позволяет выбрать элемент в зависимости от того, есть ли у него нужные потомки или соседи, подходящие под указанный селектор. Его часто используют как «родительский селектор», чтобы стилизовать контейнер по состоянию вложенных элементов. Это даёт возможность делать более контекстные стили без дополнительного JavaScript и лишних классов.
:has() — это реляционный псевдокласс CSS, который выбирает элемент, если относительно него существует другой элемент, подходящий под переданный селектор: как потомок, прямой ребёнок или сосед. Проще говоря: «выбери этот элемент, если он имеет внутри или рядом то, что описано в :has(...)».
Базовый синтаксис: селектор:has(относительный-селектор), например article:has(img) или label:has(input:checked). Внутри :has() можно использовать составные селекторы с потомками, соседями и псевдоклассами вроде :not(), :checked, :focus, :valid и т.д.
Типичные практические применения :has():
label или всего контейнера по состоянию вложенного input — :focus, :valid, :invalid, :checked и т.п..active или другому признаку).Ниже пример использования :has() как «родительского селектора» для карточки и для подписи к полю формы:
А здесь пример, как с помощью :has() управлять состоянием навигационного блока и кнопки в тулбаре в зависимости от активного пункта меню и выбранных чекбоксов:
При использовании :has() важно помнить о производительности: слишком сложные и глубокие селекторы могут замедлять рендеринг, поэтому стоит держать их разумно простыми. Поддержка :has() уже есть в современных версиях основных браузеров (Chrome, Edge, Safari, Firefox), но для действительно старых браузеров может понадобиться запасное решение или более консервативные селекторы.
Отметьте свой прогресс