CSS-Selektoren – Cheatsheet

Basis-Selektoren

Selektor	Beispiel	Wählt aus
Universal	*	alle Elemente
Typ (Tag)	p	alle <p>-Elemente
Klasse	.note	Elemente mit class="note"
ID	#header	das Element mit id="header" (eindeutig pro Seite)

Selektoren kombinieren

Syntax	Beispiel	Wählt aus
Verketten (ohne Leerzeichen)	p.note	<p>-Elemente mit der Klasse note
Mehrere Klassen	.btn.primary	Elemente mit beiden Klassen
Gruppieren	h1, h2, .title	jeden der angegebenen Selektoren

Kombinatoren

Kombinator	Beispiel	Wählt aus
Nachfahre (Leerzeichen)	nav a	<a> irgendwo innerhalb von <nav>
Kind >	ul > li	<li>, die direkte Kinder von <ul> sind
Direkter Geschwister +	h2 + p	das <p> unmittelbar nach einem <h2>
Allgemeiner Geschwister ~	h2 ~ p	alle <p> nach einem <h2> (gleiches Elternelement)

Beispiel

<div class="box">
  <h2>Titel</h2>
  <p>A</p>        <!-- h2 + p, h2 ~ p, .box > p, .box p -->
  <section>
    <p>B</p>      <!-- nur .box p -->
  </section>
  <p>C</p>        <!-- h2 ~ p, .box > p, .box p -->
</div>

Spezifität (wer gewinnt?)

#id (1-0-0) > .class (0-1-0) > tag (0-0-1) > * (0-0-0)

• Werte werden addiert: #nav .item a → 1-1-1
• Gleiche Spezifität → die zuletzt geschriebene Regel gewinnt