Wie kann ich mithilfe von CSS übergeordnete Elemente basierend auf ihren untergeordneten Elementen formatieren?

Styling übergeordneter Elemente basierend auf untergeordneten Elementen

Es ist möglich, CSS-Stile für ein Element zu definieren, die basierend auf der Anwesenheit eines bestimmten untergeordneten Elements angewendet werden Elemente. Dies wird mithilfe der Pseudoklasse :has() erreicht.

Beispiel

Betrachten Sie den folgenden HTML-Code:

<div>
  <div class="a"></div>
</div>

<div>
  <div class="b"></div>
</div>

Um das übergeordnete Div basierend auf seinen untergeordneten Elementen zu formatieren, Verwenden Sie die Pseudoklasse :has():

div:has(div.a) { border: solid 3px red; }
div:has(div.b) { border: solid 3px blue; }

Das erste Div hat einen roten Rand, da es ein untergeordnetes Div mit Klasse enthält "A". Das zweite Div hat einen blauen Rand, da es ein untergeordnetes Div mit der Klasse „b“ enthält.

Hinweis: Vor der Pseudoklasse :has() konnte dieses Verhalten nur auftreten erreicht mit JavaScript.

Das obige ist der detaillierte Inhalt vonWie kann ich mithilfe von CSS übergeordnete Elemente basierend auf ihren untergeordneten Elementen formatieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!