:has()

CSS псевдокласс :has() отображает элемент в том случае, если любой из селекторов, переданный в качестве параметра (относительно :scope (en-US)), соответствует хотя бы одному элементу.

Псевдокласс :has() берет соответствующий список селекторов в качестве аргумента. В ранней версии спецификации CSS Selectors Level 4, :has имел ограничение, которое не позволяло использовать его в таблицах стилей; только с использованием функций, как например: document.querySelector() (из-за проблем с производительностью). На текущий момент, это ограничение снято, так как ни один из браузеров не реализовал это соответствующим образом.

/* Выбирает любой тег <a>, если следом за ним находится дочерний элемент <img> */
/* Отмечу, что это не поддерживается ни одним из браузеров */
var test = document.querySelector('a:has(> img)');

Синтаксис

Error: could not find syntax for this item

Примеры

Следующий селектор находит только те теги <a>, которые непосредственно содержат дочерний элемент <img>:

a:has(> img)

Следующий селектор находит только те теги <h1> (en-US), при условии, что следом за ними находится элемент <p>:

h1:has(+ p)

Спецификации

Specification
Unknown specification
# relational

Совместимость с браузерами

BCD tables only load in the browser