Il existe maintenant un sélecteur CSS pour détecter si l’élément ciblé contient quelque chose. Dans l’exemple donné, détecter si un lien (a
) contient une image (img
) :
a:has(> img)
Pour l’heure, uniquement dans Safari. Mais Chrome l’aura à partir de la prochaine version. (Et par contre, comme souvent avec ces nouveaux pseudo-sélecteurs : c’est une tannée pour que ça dégrade correctement sur un vieux brouteurs.)
Selectors Level 4
▻https://drafts.csswg.org/selectors/#has-pseudo
4.5. The Relational Pseudo-class: :has()
The relational pseudo-class, :has()
, is a functional pseudo-class taking a <forgiving-relative-selector-list>
as an argument. It represents an element if any of the relative selectors would match at least one element when anchored against this element.
:has()
pseudo-class cannot be nested; :has()
is not valid within :has()
.
For example, the following selector matches only <a> elements that contain an <img> child:
a:has(> img)
The following selector matches a <dt> element immediately followed by another <dt> element:
``dt:has(+ dt)
``
The following selector matches <section> elements that don’t contain any heading elements:
section:not(:has(h1, h2, h3, h4, h5, h6))
Note that ordering matters in the above selector. Swapping the nesting of the two pseudo-classes, like:
section:has(:not(h1, h2, h3, h4, h5, h6))
...would result in matching any <section> element which contains anything that’s not a heading element.