5.1 Arten von Selektoren
Kombinierte Selektoren in CSS ermöglichen es, Elemente basierend auf ihrer relativen Position im DOM-Baum auszuwählen. Sie bieten eine genauere Steuerung der Stile und erlauben es, Elemente abhängig von ihrem Kontext zu stylen. In CSS gibt es mehrere Arten von kombinierten Selektoren: Nachfahre, Kind-Element, benachbartes Nachbarelement und allgemeines Nachbarelement.
Arten von kombinierten Selektoren:
- Nachfahre-Selektor (Descendant Selector)
- Kind-Selektor (Child Selector)
- Benachbarter Nachbar-Selektor (Adjacent Sibling Selector)
- Allgemeiner Nachbar-Selektor (General Sibling Selector)
5.2 Nachfahre-Selektor
Der Nachfahre-Selektor wählt alle Elemente aus, die Nachfahren eines angegebenen Elements sind. Zu den Nachfahren zählen alle Elemente, die sich innerhalb des angegebenen Elements auf jeder Verschachtelungsebene befinden (das können nicht nur Kinder, sondern auch Enkel und Urenkel sein).
Syntax:
elternteil nachfahre {
eigenschaft: wert;
eigenschaft: wert;
}
Beispiel:
/* Wählt alle <p> innerhalb von <div> aus */
div p {
color: blue;
}
<div>
<p>Dieser Absatz wird blau sein.</p>
<div>
<p>Dieser Absatz wird auch blau sein, da er ein Nachfahre von "div" ist.</p>
</div>
</div>
<p>Dieser Absatz wird nicht blau sein.</p>
5.3 Kind-Selektor
Der Kind-Selektor wählt nur die Elemente aus, die unmittelbare Kinder eines angegebenen Elternteils sind.
Syntax:
elternteil > kind {
eigenschaft: wert;
eigenschaft: wert;
}
Beispiel:
/* Wählt nur <p> aus, die unmittelbare Kinder von .container sind */
.container > p {
color: green;
}
<div class="container">
<p>Dieser Absatz wird grün sein.</p>
<div class="wrapper">
<p>Dieser Absatz wird nicht grün sein, da er kein unmittelbares Kind von .container ist.</p>
</div>
<p>Dieser Absatz wird grün sein.</p>
</div>
<p>Dieser Absatz wird nicht grün sein.</p>
5.4 Benachbarter Nachbar-Selektor
Der benachbarte Nachbar-Selektor wählt das Element aus, das unmittelbar hinter einem angegebenen Element steht und sich auf derselben Verschachtelungsebene befindet.
Syntax:
vorheriges + nächstes {
eigenschaft: wert;
eigenschaft: wert;
}
/* Wählt <p> aus, das unmittelbar hinter <h1> steht */
h1 + p {
color: red;
}
<h1>Überschrift 1</h1>
<p>Dieser Absatz wird rot sein, da er unmittelbar hinter "h1" steht.</p>
<p>Dieser Absatz wird nicht rot sein.</p>
5.5 Allgemeiner Nachbar-Selektor
Der allgemeine Nachbar-Selektor wählt alle Elemente aus, die hinter einem angegebenen Element stehen und sich auf derselben Verschachtelungsebene befinden.
Syntax:
vorheriges ~ nächstes {
eigenschaft: wert;
eigenschaft: wert;
}
Beispiel:
/* Wählt alle <p> aus, die hinter <h1> auf derselben Verschachtelungsebene stehen */
h1 ~ p {
color: purple;
}
<h1>Überschrift 1</h1>
<p>Dieser Absatz wird lila sein.</p>
<p>Dieser Absatz wird auch lila sein.</p>
<div>
<p>Dieser Absatz wird nicht lila sein, da er auf einer anderen Verschachtelungsebene ist.</p>
</div>
GO TO FULL VERSION