:has()
Baseline 2023
Newly available
Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Стили, указанные для элемента с псевдоклассом :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
Примеры
Спецификации
Specification |
---|
Selectors Level 4 # relational |
Совместимость с браузерами
BCD tables only load in the browser