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

<!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>

<!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>