Selektoren Erweitert

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

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.