Comment puis-je sélectionner des éléments DOM en fonction de l'état d'un autre élément à l'aide de sélecteurs CSS ?

Sélection d'éléments en fonction des relations d'état dans CSS

Problème : Sélectionnez d'autres éléments dans le DOM en fonction d'un état d'un élément.

Conditions de Sélection :

• Représenter les états à l'aide de sélecteurs simples (par exemple, div, [data-status~=finished]).
• Exprimer les relations structurelles à l'aide de combinateurs pour former un sélecteur complexe .
• Faire de l'élément ciblé le sujet du complexe sélecteur.

Limites actuelles :

Malheureusement, ces conditions ne peuvent pas toutes être remplies à l'aide des sélecteurs CSS actuels, en raison de :

• Absence de sélecteur de parent (pour cibler un ancêtre de l'élément sujet)
• Absence d'un frère précédent sélecteur (pour cibler les frères et sœurs qui précèdent l'élément sujet)

Capacités à venir :

La prochaine norme CSS Selectors 4 introduit des fonctionnalités qui répondent à ces limitations :

• :matches() pseudo-class: Regroupe plusieurs composés sélecteurs.
• :has() pseudo-class: Sélectionne les éléments qui contiennent des éléments enfants correspondant à un sélecteur.

Résoudre l'exemple de problème :

En utilisant :has() et :matches(), nous pouvons résoudre l'exemple de problème dans les sélecteurs CSS 4 :

section:has(> div[data-status~=finished]) + section > div:matches(.blink, .spin) {
  /* styles for targeted elements */
}

Approche alternative avec JavaScript :

Bien que ces fonctionnalités ne soient pas encore prises en charge par tous les navigateurs, vous pouvez actuellement utiliser JavaScript pour sélectionner des éléments à l'aide de :has ():

$('section:has(> div[data-status~=finished]) + section > div').filter('.blink, .spin').css('color', 'red');

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!