Использование CSS-селектора :has() на примерах⁠⁠

Как вы знаете в CSS существует псевдокласса :has(). С его помощью можно изменить родительский элемент, содержащий определённый дочерний элемент либо элемент, следующий за ним. Пока ничего непонятно, да? Давай посмотрим на практике

Из-за того, что на Пикабу нормально вставить код без потери отступов не получается, я залил эту статью в телегу. Поэтому, если вам нужно скопировать код, то перейдите к этому посту

Как использовать CSS-селектор :has()?

Рассмотрим следующий HTML-код с двумя родственными элементами с классом everybody. Как бы вы выбрали тот, у которого есть потомок с классом a-good-time?

С CSS-селектором :has() это можно реализовать следующим образом:

Это выбирает первый экземпляр .everybody и применяет к нему animation. В этом примере целью является элемент с классом everybody. Условием является наличие потомка с классом a-good-time.

Но :has() гораздо больше возможностей. Вот некоторые из них.

Выбрать anchor, которые не имеют прямого потомка SVG:

Выбрать label, у которых есть родственный input:

Выбрать documentElement, в котором некое состояние присутствует в DOM:

И так далее.

Совместимость :has() с браузерами

Не стоит забывать и о совместимости. Поскольку данный псевдокласс является нововведением, его, к сожалению, поддерживают не все браузеры:

CSS-селектор :has() на практике

Это реализация без единой строчки на JavaScript. Для начала можете посмотреть и самостоятельно протестировать пример, который реализован в CodePen:

Теперь рассмотрим его подробнее. Итак, CSS-псевдокласс :hover срабатывает, когда пользователь наводит на элемент мышью, но при этом активировать его необязательно.

Красивая плавность в примере заключается в создании набора кастомных свойств на основе сглаживающей кривой (easing curve). В нашем случае это:

Затем, чтобы применить это, нам нужны правила, которые обновляют пользовательское свойство --lerp для :hover или :focus для каждого элемента или блока. Код ниже предназначен для выбора пяти блоков с комбинацией родственных комбинаторов (+) и :has().

Последнее, что нужно сделать, это применить всё к самим блокам. Поскольку блоки выложены с помощью flexbox, можно использовать значение --lerp, чтобы изменить flex каждого блока, и translation для каждого элемента:

А вот сами значения --lerp сгенерированы с помощью утилиты GSAP для распределения значений с помощью сглаживающей кривой.