Les sélecteurs CSS peuvent-ils cibler des éléments en fonction de l'état d'autres éléments ?

Comment sélectionner des éléments en fonction de l'état d'autres éléments avec CSS

Introduction

Le ciblage d’éléments spécifiques a toujours été un aspect fondamental du CSS. Cependant, des complexités surviennent lorsque nous devons styliser des éléments en fonction de l'état d'autres éléments de la page. Cet article explore les limites des sélecteurs CSS actuels et présente une solution potentielle issue d'une norme à venir.

Limitations des sélecteurs CSS actuels

Les sélecteurs CSS ont plusieurs limitations dans la sélection des éléments en fonction de l'état des autres. Premièrement, ils ne peuvent pas accéder directement à l’état des éléments à l’aide d’un sélecteur parent ou d’un sélecteur frère précédent. Deuxièmement, ils ne peuvent cibler qu'un seul élément comme sujet du sélecteur, ce qui nous empêche d'appliquer des styles à plusieurs éléments en fonction d'une condition.

Exemple : Ciblage d'éléments en fonction de l'état de survol

Disons que nous avons plusieurs sections sur une page. Chaque section contient un div avec un attribut de données « terminé » représentant son statut. Nous souhaitons ajouter une bordure colorée aux éléments clignotants et en rotation dans la section suivante chaque fois que le div avec l'attribut "terminé" est survolé. Un sélecteur CSS simple pour cela serait :

section:hover + section .blink,
section:hover + section .spin {
  border: 1px solid red;
}

Cependant, cela ne fonctionne pas car CSS n'a pas de sélecteur parent pour cibler le div dans la première section.

Solution potentielle : Selectors 4 et :has()

Le prochain brouillon de Selectors 4 introduit une pseudo-classe appelée :has() qui résout ce problème. :has() nous permet de sélectionner des éléments qui ont un descendant spécifique. Il prend un argument de sélection relatif qui correspond aux descendants de l'élément sur lequel il est utilisé.

Une solution utilisant :has() pour le problème ci-dessus serait :

section:has(div[data-status~=finished]) + section div:matches(.blink, .spin) {
  border: 1px solid red;
}

Ici, : has() garantit que le sélecteur cible uniquement les sections contenant un div avec le statut « terminé ». Il combine également le combinateur enfant avec :matches() pour cibler à la fois les éléments clignotants et tournants dans la section suivante.

Conclusion

Bien que les sélecteurs CSS actuels aient des limites dans la sélection éléments basés sur l'état des autres, la prochaine pseudo-classe :has() dans Selectors 4 fournit une solution potentielle. Il améliore la syntaxe du sélecteur, permettant plus de flexibilité et un ciblage conditionnel des éléments.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!