Selektoren Erweitert

Zuletzt aktualisiert am 3. Juli 2026

Du kennst bereits Element-, Klassen- und ID-Selektoren. Damit kannst du Elemente direkt ansprechen. Aber was, wenn du nur Absätze innerhalb eines bestimmten Containers stylen willst? Oder nur den ersten Listenpunkt? Oder ein Element, über das der Nutzer mit der Maus fährt? Genau dafür gibt es Kombinatoren, Pseudo-Klassen und Pseudo-Elemente. Sie machen deine Selektoren präziser, ohne dass du zusätzliche Klassen ins HTML schreiben musst.

Kombinatoren

Kombinatoren verbinden zwei Selektoren miteinander und beschreiben die Beziehung zwischen Elementen im DOM-Baum. Es gibt vier Kombinatoren in CSS.

Nachfahren-Selektor (Leerzeichen)

Der häufigste Kombinator: Ein Leerzeichen zwischen zwei Selektoren trifft auf alle Elemente, die irgendwo innerhalb des ersten Elements verschachtelt sind, egal wie tief.

.card p {
  color: #7c3aed;
  font-weight: bold;
}

<div class="card">
<p>Absatz in der Card.</p>
<div>
  <p>Verschachtelter Absatz, auch in der Card.</p>
</div>
</div>
<p>Absatz außerhalb der Card.</p>

Beide <p>-Elemente innerhalb von .card werden getroffen, auch das tiefer verschachtelte. Der Absatz außerhalb bleibt unberührt.

Kind-Selektor (>)

Das Größer-als-Zeichen trifft nur auf direkte Kinder, nicht auf tiefer verschachtelte Elemente.

.liste > li {
  color: #1a56db;
  font-weight: bold;
}

<ul class="liste">
<li>Direktes Kind (getroffen)</li>
<li>Direktes Kind (getroffen)
  <ul>
    <li>Verschachteltes Kind (nicht getroffen)</li>
  </ul>
</li>
</ul>

Der Unterschied zum Nachfahren-Selektor: .liste li würde alle <li>-Elemente treffen, auch die in der verschachtelten Liste. .liste > li trifft nur die direkte Ebene.

Nachbar-Selektor (+)

Das Plus-Zeichen trifft auf das Element, das direkt nach dem ersten Element kommt (auf derselben Ebene).

h2 + p {
  color: #059669;
  font-size: 18px;
  font-weight: bold;
}

<h2>Überschrift</h2>
<p>Erster Absatz direkt nach der Überschrift.</p>
<p>Zweiter Absatz, nicht direkt nach der Überschrift.</p>

Nur der erste Absatz direkt nach <h2> wird gestylt. Das ist praktisch für Einleitungstexte unter Überschriften.

Geschwister-Selektor (~)

Die Tilde trifft auf alle nachfolgenden Geschwister, nicht nur das direkt nächste.

h2 ~ p {
  color: #dc2626;
  border-left: 3px solid #dc2626;
  padding-left: 8px;
}

<p>Absatz vor der Überschrift (nicht getroffen).</p>
<h2>Überschrift</h2>
<p>Erster Absatz nach der Überschrift.</p>
<div>Ein div dazwischen.</div>
<p>Zweiter Absatz nach der Überschrift.</p>

Beide Absätze nach der Überschrift werden getroffen, auch wenn ein <div> dazwischen steht. Der Absatz vor der Überschrift bleibt unverändert.

Kombinatoren im Überblick

Pseudo-Klassen

Pseudo-Klassen selektieren Elemente anhand ihres Zustands oder ihrer Position im DOM. Sie werden mit einem einfachen Doppelpunkt (:) geschrieben.

Interaktions-Pseudo-Klassen

Die drei wichtigsten für Nutzer-Interaktion: :hover, :focus und :active.

.btn {
  display: inline-block;
  padding: 8px 20px;
  background: #1a56db;
  color: white;
  border: 2px solid #1a56db;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn:hover {
  background: #1e40af;
  border-color: #1e40af;
}

.btn:active {
  background: #1e3a8a;
  transform: scale(0.97);
}

<a href="#" class="btn">Hover über mich</a>

• :hover: wenn die Maus über dem Element ist
• :focus: wenn das Element den Fokus hat (z.B. per Tab-Taste oder Klick auf ein Input-Feld)
• :active: im Moment des Klicks (Maustaste gedrückt)

Strukturelle Pseudo-Klassen

Diese Pseudo-Klassen wählen Elemente anhand ihrer Position innerhalb des Eltern-Elements.

li:first-child {
  background: #dbeafe;
  color: #1a56db;
  font-weight: bold;
}

li:last-child {
  background: #fef3c7;
  color: #92400e;
  font-weight: bold;
}

<ul>
<li>Erstes Element (first-child)</li>
<li>Zweites Element</li>
<li>Drittes Element</li>
<li>Letztes Element (last-child)</li>
</ul>

Mit :nth-child() kannst du noch flexibler arbeiten. Der Wert in den Klammern bestimmt, welche Elemente getroffen werden:

tr:nth-child(even) {
  background: #f3f4f6;
}

<table style="width:100%;border-collapse:collapse;">
<tr><td>Zeile 1</td><td>Ungerade</td></tr>
<tr><td>Zeile 2</td><td>Gerade</td></tr>
<tr><td>Zeile 3</td><td>Ungerade</td></tr>
<tr><td>Zeile 4</td><td>Gerade</td></tr>
<tr><td>Zeile 5</td><td>Ungerade</td></tr>
</table>

Nützliche nth-child-Werte:

• :nth-child(3): genau das dritte Element
• :nth-child(even): alle geraden Elemente (2, 4, 6, …)
• :nth-child(odd): alle ungeraden Elemente (1, 3, 5, …)
• :nth-child(3n): jedes dritte Element (3, 6, 9, …)

Die Negations-Pseudo-Klasse :not()

:not() kehrt einen Selektor um: Es trifft auf alle Elemente, die nicht dem inneren Selektor entsprechen.

li:not(.inactive) {
  font-weight: bold;
}

li.inactive {
  background: #f3f4f6;
  color: #9ca3af;
}

<ul>
<li>Aktiv</li>
<li class="inactive">Inaktiv</li>
<li>Aktiv</li>
<li class="inactive">Inaktiv</li>
</ul>

Alle Listeneinträge ohne die Klasse .inactive werden fett dargestellt. Das ist eleganter, als jedem aktiven Element eine eigene Klasse zu geben.

Ausblick: Pseudo-Klassen können sogar prüfen, was ein Element enthält. Mit :has() wählst du ein Element anhand seiner Nachkommen oder Geschwister aus, zum Beispiel eine Karte, die ein Bild enthält. Deshalb wird :has() oft Eltern-Selektor genannt. Alle Details und Beispiele findest du im Artikel Der :has() Selektor.

Pseudo-Elemente

Pseudo-Elemente erzeugen oder selektieren Teile eines Elements, die nicht als eigene HTML-Tags im Quellcode existieren. Sie werden mit doppeltem Doppelpunkt (::) geschrieben.

::before und ::after

Die beiden wichtigsten Pseudo-Elemente: Sie erzeugen ein virtuelles Element vor oder nach dem Inhalt eines Elements.

.tag::before {
  content: "# ";
  font-weight: bold;
}

.required::after {
  content: " *";
  color: #dc2626;
  font-weight: bold;
}

<span class="tag">CSS</span>
<span class="tag">HTML</span>
<br><br>
<label class="required">E-Mail-Adresse</label>

Wichtig: ::before und ::after brauchen immer die Eigenschaft content. Ohne content erscheint das Pseudo-Element nicht. Selbst wenn du nichts anzeigen willst, musst du content: "" schreiben.

::first-line und ::first-letter

Diese Pseudo-Elemente treffen auf die erste Zeile bzw. den ersten Buchstaben eines Textblocks.

.intro::first-letter {
  font-size: 40px;
  font-weight: bold;
  color: #7c3aed;
  float: left;
  margin-right: 8px;
  line-height: 1;
}

.intro::first-line {
  font-weight: bold;
}

<p class="intro">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>

Dieses Muster kennst du aus Zeitschriften und Büchern: Ein großer Anfangsbuchstabe (Drop Cap) leitet den Text ein. Mit ::first-line und ::first-letter geht das rein über CSS, ohne zusätzliches HTML.

Einfacher vs. doppelter Doppelpunkt

In älterem CSS-Code siehst du Pseudo-Elemente manchmal mit einfachem Doppelpunkt: :before statt ::before. Beide Schreibweisen funktionieren, weil Browser die alte Syntax aus Kompatibilitätsgründen weiterhin akzeptieren.

Die Konvention ist klar: Pseudo-Klassen bekommen einen einfachen Doppelpunkt (:hover, :first-child), Pseudo-Elemente bekommen einen doppelten (::before, ::after). Halte dich an den doppelten Doppelpunkt für Pseudo-Elemente.

Häufige Fehler

• content bei ::before/::after vergessen: Ohne content-Eigenschaft wird das Pseudo-Element nicht gerendert. Auch für rein dekorative Elemente brauchst du mindestens content: "".
• Pseudo-Elemente auf void-Elemente anwenden: <img>, <input> und <br> können keine ::before/::after-Pseudo-Elemente haben, weil sie keinen Inhalt enthalten.
• Kombinator-Leerzeichen vergessen oder falsch setzen: .card>p funktioniert zwar, aber .card > p ist besser lesbar. Achte auf Konsistenz.
• :first-child vs. :first-of-type verwechseln: :first-child trifft nur, wenn das Element tatsächlich das erste Kind ist. Steht davor ein anderes Element (z.B. eine Überschrift), greift :first-child nicht. :first-of-type trifft den ersten <p> unabhängig davon, was davor steht.
• Zu viele Kombinatoren verketten: main > section > div > ul > li:first-child ist fragil. Wenn sich die HTML-Struktur ändert, bricht der Selektor. Nutze lieber eine Klasse.

Zusammenfassung

Du hast jetzt ein breites Repertoire an Selektoren. Aber was passiert, wenn mehrere Selektoren auf dasselbe Element zielen und sich widersprechen? Im nächsten Artikel lernst du die Kaskade und Spezifität kennen: Die Regeln, nach denen der Browser entscheidet, welcher Style gewinnt.