Comment CSS peut-il cibler sélectivement les éléments en fonction de l'attribut d'un frère ou d'une sœur ?

Comment CSS sélectionne les éléments en fonction de l'état d'un autre élément

Identifier et cibler des éléments en fonction de l'état d'autres éléments dans le DOM peut être difficile . Les sélecteurs CSS offrent des options limitées en raison des contraintes imposées par les combinateurs et la syntaxe du sélecteur. Bien que certaines techniques de base puissent être appliquées, notamment les relations parent-enfant et l'utilisation de pseudo-classes, certains scénarios nécessitent des solutions plus avancées.

Limitations des implémentations actuelles

Les sélecteurs 3, la norme actuelle, manquent de fonctionnalités essentielles comme un sélecteur parent ou un sélecteur frère précédent. Ces fonctionnalités élargiraient considérablement les capacités du CSS pour structurer et cibler les éléments. L'incapacité de spécifier le sujet d'un sélecteur présente également une contrainte.

Potentiel des prochains sélecteurs 4

Le prochain standard Selectors 4 vise à répondre à ces limitations. La pseudo-classe :has(), inspirée des fonctionnalités de jQuery, fournit une solution flexible. :has() permet la sélection d'éléments en fonction de la présence d'autres éléments au sein de leur parent.

Résoudre le problème

L'exemple de problème présenté dans la question, qui nécessite de cibler les éléments en fonction de l'attribut data-status d'un autre élément, peut être résolu en utilisant :has() dans les sélecteurs 4 :

section:has(> div[data-status~=finished]) + section > div:matches(.blink, .spin)

Ce sélecteur atteint le résultat souhaité en utilisant :has() pour sélectionner les sections qui contiennent un div enfant avec le statut de données spécifié, puis en ciblant les éléments div des sections suivantes qui correspondent aux classes .blink ou .spin.

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!