Wie kann ich mithilfe von CSS ein Element basierend auf dem Status eines anderen Elements auswählen?

Wie wähle ich mit CSS ein Element basierend auf dem Status eines anderen Elements auf der Seite aus?

Einführung

CSS bietet grundsätzlich keine Möglichkeit, ein Element ausschließlich auf der Grundlage des Zustands eines anderen Elements auszuwählen. Durch die Kombination einfacher Selektoren, Kombinatoren und der übergeordneten Beziehung zwischen Elementen ist es jedoch möglich, in bestimmten Szenarien ein begrenztes elementübergreifendes Targeting zu erreichen.

Strukturelle Beziehungen und einfache Selektoren

CSS-Selektoren repräsentieren die Struktur und den Zustand von Elementen in einem Dokumentbaum. Einfache Selektoren wie Typselektoren, Attributselektoren und Pseudoklassen identifizieren einzelne Elemente anhand ihrer Eigenschaften. Zum Beispiel:

div[data-status~="finished"]

Kombinatoren und Beziehungen

Kombinatoren wie >, und ~ definieren Beziehungen zwischen Elementen. Zum Beispiel > stellt eine untergeordnete Beziehung dar, bezeichnet ein benachbartes Geschwister und ~ wählt alle Geschwister aus. Somit können wir Folgendes konstruieren:

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

Einschränkungen vorhandener Selektoren

Obwohl es Kinder- und Geschwisterkombinatoren gibt, fehlen Selektoren 3 inverse oder Großelternselektoren. Dies macht es unmöglich, Elemente direkt basierend auf dem Status nicht verwandter Elemente auszuwählen, wie im Beispiel:

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

Pseudo-Element-Hierarchie und dynamische Klassen

Clever Die Verwendung einer Pseudoelementhierarchie und einer dynamischen Klassenmanipulation kann manchmal Workarounds für das elementübergreifende Targeting bieten. Diese Techniken sind jedoch begrenzt und erfordern erheblichen Code.

Mögliche Lösung in CSS4: :has()

In zukünftigen CSS-Iterationen wie CSS4 gilt Folgendes: Die Pseudoklasse has() kann verwendet werden, um Elemente basierend auf ihrer Beziehung zu bestimmten Teilbäumen auszuwählen. Dies würde eine Möglichkeit bieten, die aktuellen Einschränkungen zu überwinden:

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

Das obige ist der detaillierte Inhalt vonWie kann ich mithilfe von CSS ein Element basierend auf dem Status eines anderen Elements auswählen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!