Wie kann CSS selektiv auf Elemente basierend auf dem Attribut eines Geschwisters abzielen?

Wie CSS Elemente basierend auf dem Status eines anderen Elements auswählt

Elemente basierend auf den Status anderer Elemente im DOM zu identifizieren und gezielt auszuwählen, kann eine Herausforderung sein . CSS-Selektoren bieten aufgrund von Einschränkungen durch Kombinatoren und Selektorsyntax begrenzte Optionen. Während einige grundlegende Techniken angewendet werden können, einschließlich Eltern-Kind-Beziehungen und die Verwendung von Pseudoklassen, erfordern bestimmte Szenarien fortgeschrittenere Lösungen.

Einschränkungen aktueller Implementierungen

Selektoren 3, dem aktuellen Standard, fehlen wesentliche Funktionen wie ein übergeordneter Selektor oder ein früherer Geschwisterselektor. Diese Funktionen würden die Möglichkeiten von CSS zum Strukturieren und Targeting von Elementen erheblich erweitern. Die Unmöglichkeit, den Betreff eines Selektors anzugeben, stellt ebenfalls eine Einschränkung dar.

Potenzial in kommenden Selectors 4

Der kommende Selectors 4-Standard zielt darauf ab, diese Einschränkungen zu beheben. Die von der jQuery-Funktionalität inspirierte Pseudoklasse :has() bietet eine flexible Lösung. :has() ermöglicht die Auswahl von Elementen basierend auf dem Vorhandensein anderer Elemente innerhalb ihres übergeordneten Elements.

Lösung des Problems

Das in der Frage vorgestellte Beispielproblem, das erfordert das Targeting von Elementen basierend auf dem Datenstatusattribut eines anderen Elements, kann mit :has() in Selektoren 4 gelöst werden:

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

Dieser Selektor erreicht das gewünschtes Ergebnis, indem Sie mit :has() Abschnitte auswählen, die ein untergeordnetes Div mit dem angegebenen Datenstatus enthalten, und dann auf die Div-Elemente nachfolgender Abschnitte abzielen, die entweder der .blink- oder der .spin-Klasse entsprechen.

Das obige ist der detaillierte Inhalt vonWie kann CSS selektiv auf Elemente basierend auf dem Attribut eines Geschwisters abzielen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!