HTML + CSS: Selektoren

Kurz: Selektoren wählen die Elemente aus, die eine Regel gestalten soll. Sie sind das Herz von CSS.

Teil des Kurses HTML + CSS

Kapitel 14 von 27 im Kurs HTML + CSS. Mit Fortschritt, Quiz und Zertifikat auf der Lernseite.

Selektoren wählen die Elemente aus, die eine Regel gestalten soll. Sie sind das Herz von CSS.

Grundselektoren

Selektor	Wählt	Beispiel
*	alle Elemente	* { box-sizing: border-box; }
p	alle <p>	p { margin: 0; }
.klasse	Elemente mit class="klasse"	.karte { ... }
#id	Element mit id="id"	#kopf { ... }
a, b	beide Gruppen	h1, h2 { ... }

Kombinatoren

Selektor	Bedeutung
a b	b irgendwo in a (Nachfahre)
a > b	b direktes Kind von a
a + b	b direkt nach a (Nachbar)
a ~ b	b irgendwo nach a (gleiche Ebene)

<style>
  nav a { color: navy; }                    /* alle Links im nav */
  ul > li { list-style: square; }           /* nur direkte Kinder */
  h2 + p { font-weight: bold; }             /* erster Absatz direkt nach h2 */
  h2 ~ p { color: #555; }                   /* alle Absätze danach */
</style>
<nav><a href="#">Link im Menü</a></nav>
<ul><li>Eins<ul><li>verschachtelt</li></ul></li><li>Zwei</li></ul>
<h2>Titel</h2>
<p>Direkt nach h2 (fett)</p>
<p>Weiterer Absatz (grau)</p>

Attributselektoren

<style>
  a[href^="https"] { color: green; }           /* beginnt mit */
  a[href$=".pdf"]::after { content: " (PDF)"; } /* endet mit */
  a[href*="beispiel"] { text-decoration: underline wavy; }  /* enthält */
  input[type="text"] { border: 2px solid teal; }
  [data-status="fertig"] { color: gray; text-decoration: line-through; }
  a[target="_blank"]::after { content: " ↗"; }
</style>
<p><a href="https://example.org">sicherer Link</a> · <a href="dokument.pdf">Dokument</a> ·
<a href="http://beispiel.de">Beispiel</a> · <a href="#" target="_blank">neuer Tab</a></p>
<input type="text" placeholder="Text">
<p data-status="fertig">Erledigte Aufgabe</p>

Pseudo-Klassen: Zustände

Pseudo-Klassen beginnen mit einem Doppelpunkt und beschreiben Zustand oder Position:

<style>
  a:hover { background: #fde68a; }
  a:focus-visible { outline: 3px solid #1d4ed8; }
  a:visited { color: purple; }
  button:active { transform: scale(0.95); }
  input:focus { border-color: orange; outline: none; box-shadow: 0 0 0 3px #fed7aa; }
  input:invalid { border-color: crimson; }
  input:valid { border-color: seagreen; }
  input:disabled { background: #eee; }
  li:first-child { font-weight: bold; }
  li:last-child { color: crimson; }
  li:nth-child(even) { background: #f1f5f9; }
  li:nth-child(3n) { font-style: italic; }
  li:not(.x) { padding-left: 4px; }
</style>
<p><a href="#">Hover und Fokus</a> <button>Klick</button></p>
<input type="email" required value="falsch"> <input value="aus" disabled>
<ul><li>eins</li><li>zwei</li><li>drei</li><li>vier</li><li>fünf</li><li>sechs</li></ul>

Pseudo-Klasse	Bedeutung
:hover	Maus darüber
:focus, :focus-visible	Fokus (focus-visible: nur bei Tastatur)
:active	gerade gedrückt
:checked, :disabled, :required, :valid, :invalid	Formularzustand
:first-child, :last-child, :only-child	Position
:nth-child(n)	2, odd, even, 3n, 2n+1
:first-of-type, :nth-of-type()	Position unter Geschwistern desselben Typs
:not(x)	alles außer x
:is(a, b), :where(a, b)	Gruppe (where hat Spezifität 0)
:has(x)	Elternelement, das x enthält
:root	das <html>-Element (Ort für Variablen)

Pseudo-Elemente: Teile eines Elements

Pseudo-Elemente haben zwei Doppelpunkte:

<style>
  p::first-line { font-weight: bold; }
  p::first-letter { font-size: 2.4em; float: left; line-height: 1; margin-right: 6px; color: crimson; }
  ::selection { background: #fde68a; }
  .hinweis::before { content: "ℹ "; color: teal; }
  .hinweis::after { content: " ←"; }
  input::placeholder { color: #94a3b8; font-style: italic; }
  li::marker { color: crimson; }
</style>
<p>Ein langer Absatz mit großem Anfangsbuchstaben und fetter erster Zeile. Der Rest des Textes läuft normal weiter, damit man den Effekt gut erkennen kann.</p>
<p class="hinweis">Hinweis mit Symbol</p>
<input placeholder="Platzhalter-Stil">
<ul><li>Farbiger Punkt</li></ul>

::before und ::after erzeugen Inhalte, die nur zur Dekoration dienen (content ist Pflicht). Wichtige Inhalte gehören ins HTML, weil Screenreader generierten Inhalt nicht zuverlässig vorlesen.

:has(): der Eltern-Selektor

<style>
  .karte { border: 2px solid #cbd5e1; padding: 8px; margin: 6px 0; border-radius: 6px; }
  .karte:has(img) { border-color: teal; }
  .karte:has(input:checked) { background: #dcfce7; }
  form:has(:invalid) button { opacity: .5; }
</style>
<div class="karte">Karte ohne Bild</div>
<div class="karte"><svg width="24" height="24"><circle cx="12" cy="12" r="10" fill="teal"/></svg> Karte mit Bild-Element</div>
<div class="karte"><label><input type="checkbox"> Auswählen (Karte wird grün)</label></div>

Spezifität: wer gewinnt?

Jeder Selektor hat ein “Gewicht” aus drei Zahlen (ID, Klasse, Element):

Selektor	Gewicht
p	(0, 0, 1)
.karte	(0, 1, 0)
p.karte	(0, 1, 1)
#kopf	(1, 0, 0)
nav ul li a:hover	(0, 1, 4)
style="..." (inline)	schlägt alles ohne !important

Verglichen wird von links nach rechts: Eine ID schlägt beliebig viele Klassen.

Tipps für wartbares CSS:

• Arbeite fast nur mit Klassen, nicht mit IDs
• Vermeide lange Ketten (div.a ul li a) und !important
• Mit :where() bekommen Basisregeln die Spezifität 0 und sind leicht zu überschreiben
• Benenne Klassen nach ihrer Funktion, nicht ihrem Aussehen (.warnung statt .rot); beliebt ist die BEM-Notation .karte__titel--gross

Merke

• Selektoren: Element, .klasse, #id, Kombinatoren ( , >, +, ~), Attribute [x^="..."]
• Pseudo-Klassen (:hover, :focus-visible, :nth-child, :not, :has) beschreiben Zustände
• Pseudo-Elemente (::before, ::after, ::first-line) beschreiben Teile
• Spezifität: ID > Klasse > Element; bei Gleichstand gewinnt die spätere Regel
• Arbeite mit Klassen, vermeide !important

Übungsaufgabe

Gestalte eine Liste so, dass jedes zweite Element einen Hintergrund hat, das erste fett und das letzte rot ist, und ein Link auf Hover und Fokus gut sichtbar reagiert.

Quiz zur Selbstkontrolle

Was wählt a > b?

• b als direktes Kind von a (richtig)
• b irgendwo in a
• b nach a
• a und b

Wie viele Doppelpunkte hat ein Pseudo-Element?

• Zwei (::before) (richtig)
• Einen
• Keinen
• Drei

Welcher Selektor ist am spezifischsten?

• #kopf (richtig)
• .karte
• p.karte
• p

Weiter im Kurs

Zurück: CSS: Grundlagen

Weiter: Farben und Hintergründe

Alle Kapitel: HTML + CSS im Überblick