: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.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.
Please take two minutes to fill out our short survey.

Стили, указанные для элемента с псевдоклассом :has(), будут применены, если хотя бы один из относительных селекторов, переданных в качестве аргумента, соответствует хотя бы одному элементу.

С помощью данного псевдокласса можно указать стили для родительского или предшествующего элементов.

css
/* Отступ снизу будет обнулён только для тегов <h1>,
следом за которыми идёт тег <p> */
h1:has(+ p) {
  margin-bottom: 0;
}

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

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

Синтаксис

Error: could not find syntax for this item

Примеры

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

css
a:has(> img) {
}

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

css
h1:has(+ p) {
}

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

Specification
Selectors Level 4
# relational

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