EMZETT.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) |
Ergebnis
Attributselektoren
Ergebnis
Pseudo-Klassen: Zustände
Pseudo-Klassen beginnen mit einem Doppelpunkt und beschreiben Zustand oder Position:
Ergebnis
| 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:
Ergebnis
::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
Ergebnis
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 (
.warnungstatt.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
Aufgabe
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.