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()' в этой спецификации. |
Рабочий черновик | Начальное определение |
Совместимость с браузерами
BCD tables only load in the browser