Wie wähle ich alle untergeordneten Elemente mit CSS rekursiv aus?

CSS (oder Cascading Style Sheets) wird zum Rendern und Entwerfen von Webseiten verwendet. Es wird nicht allein, sondern zusammen mit HTML oder XML verwendet, um das Erscheinungsbild und Layout einer Webseite zu definieren. CSS hilft Entwicklern dabei, alle HTML-Elemente zu gestalten, einschließlich Überschriften, Absätze, Text, Bilder, Tabellen und mehr. Darüber hinaus wird auch angegeben, wie sie auf verschiedenen Bildschirmen, auf druckbaren oder anderen Medientypen angezeigt werden. Es kann auch verwendet werden, um responsive Webdesigns für verschiedene Bildschirmgrößen und Geräte zu erstellen.

CSS spielt eine wichtige Rolle in der Webentwicklung, da es von allen gängigen Webbrowsern weitgehend unterstützt wird und es Entwicklern ermöglicht, hervorragende Benutzeroberflächen (UI) und dynamische Webanwendungen zu erstellen, die Benutzer ansprechen und ihr Gesamterlebnis verbessern. Die Auswahl von Elementen ist eine der häufigsten Aufgaben beim Stylen von HTML-Elementen mithilfe von CSS. Sie werden feststellen, dass wir in manchen Fällen möglicherweise alle untergeordneten Elemente eines Elements auswählen möchten, einschließlich ihrer verschachtelten untergeordneten Elemente. In diesem Artikel erfahren Sie, wie Sie mithilfe von CSS alle diese untergeordneten Elemente rekursiv auswählen.

Was sind CSS-Selektoren?

CSS-Selektoren sind ein Muster zum Auswählen und Positionieren von HTML-Elementen für das Styling oder andere Vorgänge. Selektoren wählen Elemente basierend auf Attributen wie Klasse, ID oder Typ aus. Die Syntax für die Verwendung von CSS-Selektoren lautet wie folgt:

Grammatik

element > element {
   //CSS styles go here
}

Was ist ein untergeordneter Selektor in CSS?

Ein untergeordneter Selektor in CSS ist ein Kombinator, der direkte untergeordnete Elemente eines übergeordneten Elements auswählt. Die Definition erfolgt über das Symbol „>“. Außerdem werden direkte untergeordnete Elemente des angegebenen übergeordneten Elements ausgewählt.

Grammatik

.parent > li {
   //CSS styles go here
}

Die Syntax besteht aus dem „>“-Symbol, das nur auf direkte untergeordnete Elemente des „main-list“-Elements abzielt, in diesem Fall „li“. Daher wählt die oben definierte CSS-Regel nur die Listen „Listenelement 1“ und „Listenelement 2“ aus, nicht jedoch die Liste „Liste 1“, die in einem verschachtelten ul-Element verschachtelt ist.

Untergeordnete Selektoren sind nützlich, wenn Sie Stile auf bestimmte untergeordnete Elemente eines übergeordneten Elements anwenden müssen, ohne deren untergeordnete oder verschachtelte untergeordnete Elemente zu beeinflussen. Untergeordnete Selektoren bieten außerdem eine spezifischere Möglichkeit, Elemente im Dokumentbaum zu finden, und können dazu beitragen, Konflikte mit anderen CSS-Regeln zu vermeiden, die möglicherweise für ähnliche Elemente gelten.

Alle untergeordneten Elemente in CSS rekursiv auswählen

Manchmal kann es vorkommen, dass wir alle untergeordneten Elemente auswählen müssen. Wir können CSS-Selektoren verwenden, um Elemente mit dem (*)-Operator auszuwählen. Die Syntax zur Auswahl aller untergeordneten Elemente eines Elements wird über den Operator „>“ definiert. Die folgende CSS-Regel wählt beispielsweise alle direkten untergeordneten Elemente des „parent“-Elements aus.

Grammatik

.main-list > * {
   //CSS styles go here
}

Die obige Syntax wählt alle untergeordneten Elemente des „main-list“-Elements aus, einschließlich ihrer verschachtelten untergeordneten Elemente. Sie werden feststellen, dass das Leerzeichen zwischen dem „main-list“-Element und dem Platzhalter-Selektor (*) anzeigt, dass wir alle Nachkommen des „parent“-Elements auswählen möchten, nicht nur die direkten untergeordneten Elemente.

Sie können auch die Pseudoklasse „:not()“ verwenden, um bestimmte Elemente von der Auswahl auszuschließen. Die folgende CSS-Regel wählt beispielsweise rekursiv alle untergeordneten Elemente des „main-list“-Elements aus, mit Ausnahme des „list-not“-Elements -

Beispiel 1: Demonstriert ein Beispiel für die Auswahl aller untergeordneten Elemente

Im folgenden Beispiel definieren wir eine .parent > div-Klasse, die Stile auf jedes Element anwendet, das ein direktes untergeordnetes Element eines Elements mit der Klasse „parent“ ist. In diesem Fall ist das einzige Element, das diese Bedingung erfüllt, das Element vom Typ „main-list“.

Der im CSS-Code angegebene Stil setzt die Hintergrundfarbe des passenden

-Elements auf Grün. Daher ist die Hintergrundfarbe des

-Elements mit dem Klassennamen „main-list“ grün. Die

-Elemente innerhalb des

-Elements mit dem Klassennamen „main-list“ sind von diesem CSS-Stil nicht betroffen, da sie keine direkten untergeordneten Elemente des übergeordneten Elements mit dem Klassennamen „parent“ sind.

Die beiden

Elemente, die direkte untergeordnete Elemente des übergeordneten Elements sind, sind jedoch ebenfalls nicht betroffen, da sie keine Elemente sind.

<!DOCTYPE html>
<html>
   <head>
      <style>
         .parent > div {
            background-color: green;
         }
      </style>
   </head>
   <body>
      <div class="parent">
         <div class="main-list">
            <li>List item 1</li>
            <li>List item 2</li>
         </div>
         <li>List item 3</li>
         <li>List item 4</li>
      </div>
   </body>
</html>

Beispiel 2: Beispiel, das die rekursive Auswahl aller untergeordneten Elemente demonstriert

Im gegebenen Beispiel wird der CSS-Selektor „div.parent > *“ verwendet, um rekursiv alle untergeordneten Elemente des „div“-Elements auszuwählen, die die Klasse „parent“ haben, was bedeutet, dass alle untergeordneten Elemente von „div“ ausgewählt werden, einschließlich verschachtelte Elemente

.

Im angegebenen Code wird der Selektor in Verbindung mit dem Attribut „background-color: green“ verwendet, das die Hintergrundfarbe für alle untergeordneten Elemente des „div“-Elements mit der Klasse „parent“, einschließlich verschachtelter Elemente, auf Grün setzt. li“-Elemente und „li“-Elemente innerhalb von „span“-Elementen.

<!DOCTYPE html>
<html>
   <head>
      <style>
         div.parent,
         div.parent > * {
            background-color: green;
         }
      </style>
   </head>
   <body>
      <div class="parent">
         <li>List item 1</li>
         <li>List item 2</li>
         <span>
            <li>List item 3</li>
         </span>
      </div>
      <li>List item 4</li>
      <li>List item 5</li>
   </body>
</html>

Fazit

CSS ist die Sprache, die zum Gestalten von Webseiten verwendet wird. In CSS ist die Auswahl von Elementen eine der häufigsten Aufgaben. Untergeordnete Selektoren in CSS werden verwendet, um direkte untergeordnete Elemente eines übergeordneten Elements auszuwählen. Die Definition erfolgt über das Symbol „>“. Manchmal müssen wir alle untergeordneten Elemente rekursiv auswählen, was mit dem ()-Operator erreicht werden kann.

Durch die Verwendung eines Leerzeichens zwischen dem übergeordneten Element und dem Platzhalter selector() können wir alle untergeordneten Elemente des übergeordneten Elements auswählen. Die Pseudoklasse „:not()“ kann auch verwendet werden, um bestimmte Elemente von der Auswahl auszuschließen. CSS-Selektoren sind für die Erstellung optisch ansprechender und dynamischer Websites, die das Benutzererlebnis verbessern, unerlässlich.