Wie kann ich ein übergeordnetes Element basierend auf der Existenz eines bestimmten untergeordneten Elements in CSS formatieren?

Stil auf übergeordnetes Element anwenden, wenn es ein untergeordnetes Element mit CSS hat

In CSS kann das übergeordnete Element basierend auf der Existenz seiner untergeordneten Elemente gestaltet werden wird mit dem has()-Selektor erreicht.

Um Stile auf das übergeordnete Element anzuwenden, wenn es ein untergeordnetes Element mit der Klasse „sub“ enthält, verwenden Sie das folgende CSS Regel:

ul li:has(ul.sub) {
  /* Parent styles */
}

Zum Beispiel, wenn Sie den folgenden HTML-Code haben:

<ul class="main">
  <li>Parent 1</li>
  <li>Parent 2</li>
  <li>Parent 3 with Child
    <ul class="sub">
      <li>Child of Parent 3</li>
    </ul>
  </li>
  <li>Parent 4</li>
</ul>

Und das folgende CSS:

ul li:has(ul.sub) {
  background-color: lightblue;
}

In der Ausgabe wird „Übergeordnet“ angezeigt 3 mit Kind“ in Hellblau, was darauf hinweist, dass das Elternteil (li) ein Kind mit der Klasse „sub“ hat.

Beachten Sie, dass der in der erwähnte $-Selektor verwendet wird Die vorgeschlagene Antwort auf die Frage ist in CSS4 noch nicht standardisiert. Stattdessen ist der has()-Selektor die unterstützte Möglichkeit, diese Funktionalität zu erreichen.

Das obige ist der detaillierte Inhalt vonWie kann ich ein übergeordnetes Element basierend auf der Existenz eines bestimmten untergeordneten Elements in CSS formatieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!