:has()
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since декабрь 2023 г..
Стили, указанные для элемента с псевдоклассом :has(), будут применены, если хотя бы один из относительных селекторов, переданных в качестве аргумента, соответствует хотя бы одному элементу.
С помощью данного псевдокласса можно указать стили для родительского или предшествующего элементов.
/* Отступ снизу будет обнулён только для тегов <h1>,
следом за которыми идёт тег <p> */
h1:has(+ p) {
margin-bottom: 0;
}
Псевдокласс :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>, при условии, что следом за ними находится элемент <p>:
h1:has(+ p) {
}
Спецификации
| Specification |
|---|
| Selectors Level 4 # relational |