ARNO*

Geek dilettante habitant une belle et grande propriété sur la Côte d’améthyste

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