Псевдокласс :has()

Синтаксис – селектор:has(аргумент). Браузер «якорит» проверку на элементе слева: section:has(img) выберет секцию, внутри которой на любой глубине есть изображение; сама картинка при этом не стилизуется. Аргумент – список относительных селекторов через запятую, причём список forgiving («прощающий»): невалидный селектор в нём игнорируется и не ломает правило.

Комбинаторы внутри аргумента меняют смысл проверки:

• :has(img) – потомок на любой глубине;
• :has(> img) – только прямой потомок;
• h1:has(+ h2) – «предыдущий сосед»: выбирается заголовок, сразу за которым идёт h2;
• :has(video, audio) – логическое ИЛИ; цепочка :has(video):has(audio) – И.

Типовые применения в одном блоке кода:

/* Родитель по ребёнку: карточка с изображением и без */
.card:has(.card__image) { display: flex; gap: 1rem; }
.card:not(:has(.card__image)) { border-top: 3px solid #7c93e9; }

/* Подсветка группы полей формы при ошибке */
.form-group:has(:invalid) { border-color: #d33; }

/* Quantity query: от 5 элементов – плитка мельче */
.wrapper:has(.item:nth-last-child(n + 5)) { --item-size: 120px; }

Последний пример – так называемый quantity query: связка с :nth-last-child() меняет стили контейнера в зависимости от количества дочерних элементов. До :has() это делалось только скриптом.

:has() и классы-флаги из JavaScript – в чём разница

Ограничения зафиксированы в спецификации: вкладывать :has() внутрь :has() нельзя, а псевдоэлементы вроде ::before невалидны и внутри аргумента, и как якорь. В браузере без поддержки селектор с :has() инвалидирует всё правило (вне forgiving-обёрток :is() и :where()), поэтому для прогрессивного улучшения используют проверку @supports selector(:has(a)).

Специфичность :has() равна специфичности самого «сильного» селектора в аргументе – сам псевдокласс ничего не добавляет. div:has(#promo) весит как селектор с ID. Как это влияет на каскад – в статье о специфичности CSS.