Une introduction au sélecteur :has() en CSS —

Dans cet extrait de Libérer la puissance du CSSnous nous penchons sur la façon de sélectionner des éléments avec le CSS :has() sélecteur.

Annoncé comme « le sélecteur de parents », le :has() pseudo-class a une portée bien plus large que le simple style de l’ancêtre d’un élément. Avec sa disponibilité dans Safari 15.4+ et Chromium 105+, et derrière un drapeau dans Firefoxc’est le moment idéal pour vous familiariser avec :has() et ses cas d’utilisation.

En tant que pseudo-classe, la fonctionnalité de base de :has() consiste à styliser l’élément auquel il est attaché – autrement connu sous le nom d’élément « cible ». Ceci est similaire à d’autres pseudo-classes comme :hover ou :activeoù a:hover est destiné à styliser le <a> élément dans un état actif.

Cependant, :has() est également similaire à :is(), :where()et :not()en ce qu’il accepte un une liste de sélecteurs relatifs entre parenthèses. Ceci permet :has() pour créer des critères complexes à tester, ce qui en fait un sélecteur très puissant.

Pour avoir une idée de la façon dont :has() fonctionne, regardons un exemple de la façon de l’appliquer. Dans le sélecteur suivant, nous testons si un <article> l’élément a un <img> élément en tant qu’enfant :

article:has(img) {}

Un résultat possible de ce sélecteur est illustré dans l’image ci-dessous. Trois éléments d’article sont affichés, deux contenant des images et tous deux ayant un fond vert pâle et un rembourrage différent de celui sans image.

Le sélecteur ci-dessus s’appliquera tant qu’un <img> l’élément existe n’importe où avec le <article> élément — que ce soit en tant qu’enfant direct ou en tant que descendant d’autres éléments imbriqués.

Si nous voulons nous assurer que la règle ne s’applique que si le <img> est un enfant direct (non imbriqué) de <article> élément, nous pouvons également inclure le combinateur enfant :

article:has(> img) {}

Le résultat de ce changement est illustré dans l’image ci-dessous. Les trois mêmes cartes sont montrées, mais cette fois seulement celle où l’image est un enfant direct de la <article> a le fond vert pâle et le rembourrage.

Dans les deux sélecteurs, les styles que nous définissons sont appliqués à l’élément cible, qui est le <article>. C’est pourquoi les gens appellent souvent :has() le sélecteur « parent » : si certains éléments existent d’une certaine manière, leur « parent » reçoit les styles assignés.

Noter la :has() la pseudo-classe elle-même n’ajoute aucun poids de spécificité au sélecteur. Comme :is() et :not()la spécificité de :has() est égal au sélecteur de spécificité le plus élevé dans la liste des sélecteurs. Par exemple, :has(#id, p, .class) aura la spécificité accordée à un id. Pour un rappel sur la spécificité, revoir la section sur la spécificité dans CSS Master, 3e édition.

Nous pouvons également sélectionner un élément cible s’il est suivi d’un élément frère spécifique en utilisant le combinateur frère adjacent (+). Dans l’exemple suivant, nous sélectionnons un <h1> élément uniquement s’il est directement suivi d’un <h2>:

h1:has(+ h2) {}

Dans l’image ci-dessous, deux <article> éléments sont affichés. Dans le premier, parce que le <h1> est suivi d’un <h2>le <h1> a un fond vert pâle qui lui est appliqué.

En utilisant le combinateur général de frères et sœurs (~), nous pouvons vérifier si un élément spécifique est un frère n’importe où après la cible. Ici, nous vérifions s’il y a un <p> élément quelque part en tant que frère du <ul>:

ul:has(~ p) {}

L’image ci-dessous montre deux <article> éléments, chacun contenant une liste non ordonnée. La liste du deuxième article est suivie d’un paragraphe, elle a donc un arrière-plan vert pâle appliqué.

Les sélecteurs que nous avons utilisés jusqu’à présent ont stylisé l’élément cible attaché à :has()comme le <ul> dans ul:has(~ p). Tout comme avec les sélecteurs réguliers, notre :has() les sélecteurs peuvent être étendus pour être beaucoup plus complexes, tels que la définition de conditions de style pour des éléments non directement attachés au :has() sélecteur.

Dans le sélecteur suivant, les styles s’appliquent à tous <p> éléments qui sont frères d’un <h2> qui a lui-même un <h3> comme frère adjacent :

h2:has(+ h3) ~ p

Dans l’image ci-dessous, deux <article> éléments sont affichés. Dans le second, les paragraphes sont stylisés avec un arrière-plan vert pâle et une marge gauche augmentée, car les paragraphes sont frères d’un <h2> suivi d’un <h3>.

Remarque : nous aurons plus de succès en utilisant :has() si nous avons une bonne compréhension des sélecteurs CSS disponibles. Offres MDN un aperçu concis des sélecteurset j’ai écrit une série en deux parties sur les sélecteurs avec des exemples pratiques supplémentaires.

Se souvenir, :has() peut accepter une liste de sélecteurs, que nous pouvons considérer comme OR conditions. Choisissons un paragraphe s’il comprend <a> _ou_ <strong> _ou_ <em>:

p:has(a, strong, em) {}

Dans l’image ci-dessous, il y a deux paragraphes. Étant donné que le deuxième paragraphe contient un <strong> élément, il a un fond vert pâle.

On peut aussi enchaîner :has() sélecteurs à créer AND conditions. Dans le sélecteur de composé suivant, nous testons à la fois qu’un <img> est le premier enfant de la <article>et que le <article> contient un <h1> suivi d’un <h2>:

article:has(> img:first-child):has(h1 + h2) {}

L’image ci-dessous montre trois <article> éléments. Le deuxième article a un arrière-plan vert pâle (ainsi que d’autres styles) car il contient à la fois une image en tant que premier enfant et un <h1> suivi d’un <h2>.

Vous pouvez consulter tous ces exemples de sélecteurs de base dans la démo CodePen suivante.

Voir le stylo
Exemples de syntaxe du sélecteur :has() par SitePoint (@SitePoint)
sur CodePen.

Cet article est extrait de Libérer la puissance du CSS : techniques avancées pour des interfaces utilisateur réactivesdisponible sur SitePoint Premium.