:has()

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

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

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

Синтаксис

:has( <relative-selector-list> )

где
<relative-selector-list> = <relative-selector>#

где
<relative-selector> = <combinator>? <complex-selector>

где
<combinator> = '>' | '+' | '~' | [ '||' ]
<complex-selector> = <compound-selector> [ <combinator>? <compound-selector> ]*

где
<compound-selector> = [ <type-selector>? <subclass-selector>* [ <pseudo-element-selector> <pseudo-class-selector>* ]* ]!

где
<type-selector> = <wq-name> | <ns-prefix>? '*'
<subclass-selector> = <id-selector> | <class-selector> | <attribute-selector> | <pseudo-class-selector>
<pseudo-element-selector> = ':' <pseudo-class-selector>
<pseudo-class-selector> = ':' <ident-token> | ':' <function-token> <any-value> ')'

где
<wq-name> = <ns-prefix>? <ident-token>
<ns-prefix> = [ <ident-token> | '*' ]? |
<id-selector> = <hash-token>
<class-selector> = '.' <ident-token>
<attribute-selector> = '[' <wq-name> ']' | '[' <wq-name> <attr-matcher> [ <string-token> | <ident-token> ] <attr-modifier>? ']'

где
<attr-matcher> = [ '~' | | | '^' | '$' | '*' ]? '='
<attr-modifier> = i | s

Примеры

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

a:has(> img)

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

h1:has(+ p)

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

Спецификация Статус Комментарий
Selectors Level 4
Определение ':has()' в этой спецификации.
Рабочий черновик Начальное определение

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
:has()Chrome Нет поддержки Нет
Замечания
Нет поддержки Нет
Замечания
Замечания See bug 669058
Edge Нет поддержки Нет
Замечания
Нет поддержки Нет
Замечания
Замечания See bug 669058
Firefox Нет поддержки Нет
Замечания
Нет поддержки Нет
Замечания
Замечания See bug 418039
IE Нет поддержки НетOpera Нет поддержки НетSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Нет поддержки НетFirefox Android Нет поддержки Нет
Замечания
Нет поддержки Нет
Замечания
Замечания See bug 418039
Opera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет

Легенда

Нет поддержки  
Нет поддержки
Смотрите замечания реализации.
Смотрите замечания реализации.