:has()
CSS псевдокласс :has()
отображает элемент в том случае, если любой из селекторов, переданный в качестве параметра (относительно :scope
(en-US)), соответствует хотя бы одному элементу.
Псевдокласс :has()
берет соответствующий список селекторов в качестве аргумента. В ранней версии спецификации CSS Selectors Level 4, :has
имел ограничение, которое не позволяло использовать его в таблицах стилей; только с использованием функций, как например: document.querySelector()
(из-за проблем с производительностью). На текущий момент, это ограничение снято, так как ни один из браузеров не реализовал это соответствующим образом.
/* Выбирает любой тег <a>, если следом за ним находится дочерний элемент <img> */
/* Отмечу, что это не поддерживается ни одним из браузеров */
var test = document.querySelector('a:has(> img)');
Синтаксис
Примеры
Следующий селектор находит только те теги <a>
, которые непосредственно содержат дочерний элемент <img>
:
a:has(> img)
Следующий селектор находит только те теги <h1>
(en-US), при условии, что следом за ними находится элемент <p>
:
h1:has(+ p)
Спецификации
Specification |
---|
Selectors Level 4 # relational |
Совместимость с браузерами
BCD tables only load in the browser