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

Comment sélectionner un élément en fonction de l'état d'un autre élément dans la page avec CSS ?

Introduction

CSS ne fournit pas intrinsèquement un moyen de sélectionner un élément basé uniquement sur l'état d'un autre élément. Cependant, en combinant des sélecteurs simples, des combinateurs et la relation parent entre les éléments, il est possible d'obtenir un ciblage croisé limité dans des scénarios spécifiques.

Relations structurelles et sélecteurs simples

Les sélecteurs CSS représentent la structure et l'état des éléments dans une arborescence de documents. Les sélecteurs simples tels que les sélecteurs de type, les sélecteurs d'attributs et les pseudo-classes identifient les éléments individuels en fonction de leurs propriétés. Par exemple :

div[data-status~="finished"]

Combinateurs et relations

Les combinateurs, tels que >, et ~, définissent des relations entre les éléments. Par exemple, > représente une relation enfant, désigne un frère ou une sœur adjacent et ~ sélectionne tous les frères et sœurs. Ainsi, nous pouvons construire :

section > div[data-status~="finished"]

Limitations des sélecteurs existants

Malgré les combinateurs enfants et frères et sœurs, les sélecteurs 3 manquent de sélecteurs inverses ou grands-parents. Cela rend impossible la sélection directe d'éléments en fonction de l'état d'éléments non liés, comme dans l'exemple :

<section>
    <div data-status="finished"></div>
    <section>
        <div>

Hiérarchie des pseudo-éléments et classes dynamiques

Intelligent l'utilisation d'une hiérarchie de pseudo-éléments et d'une manipulation dynamique de classes peut parfois fournir des solutions de contournement pour le ciblage multi-éléments. Cependant, ces techniques sont limitées et nécessitent un code important.

Solution potentielle en CSS4 : :has()

Dans les futures itérations de CSS, telles que CSS4, le : La pseudo-classe has() peut être utilisée pour sélectionner des éléments en fonction de leur relation avec des sous-arbres spécifiques. Cela permettrait de surmonter les limitations actuelles :

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

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!