:has()¶

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

Псевдокласс :has() принимает список селекторов в качестве аргумента.

В текущей спецификации :has() нельзя использовать в таблицах стилей; только с такими функциями, как document.querySelector().

Синтаксис¶

1
2
3
4

/* Selects any <a>, as long as it has an <img> element directly inside it  */
/* Note that this is not supported in any browser yet */
/* It also isn't intended to work in stylesheets */
var test = document.querySelector('a:has(> img)')

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

• Selectors Level 4

Пример¶

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

1

a: has(> img);

Следующий селектор соответствует элементу <dt>, за которым сразу следует другой элемент <dt>:

1

dt: has(+ dt);

Следующий селектор соответствует элементам <section>, которые не содержат элементов заголовков:

1

section: not(: has(h1, h2, h3, h4, h5, h6));

Обратите внимание, что порядок имеет значение в вышеупомянутом селекторе. Поменять местами вложенность двух псевдоклассов, например:

1

section: has(: not(h1, h2, h3, h4, h5, h6));

... приведет к совпадению с любым элементом <section>, который содержит все, что не является элементом заголовка.

См. также¶

• :scope

Ссылки¶

• :has() ^{MDN (рус.)}

Комментарии