Pseudoklassen

Pseudoklassen beschreiben einen Zustand oder eine Position eines Elements. Sie wählen kein neues Element aus, sondern reagieren auf Situationen wie Hover, Fokus oder die Struktur im Dokument.

Sie werden eingesetzt, wenn Styles nur unter bestimmten Bedingungen gelten sollen – etwa bei Benutzerinteraktionen oder abhängig von der Position eines Elements innerhalb eines Containers.

---

Syntax

Eine Pseudoklasse wird mit einem Doppelpunkt an einen Selektor angehängt: selektor:zustand

a:hover {
    text-decoration: underline;
}

:hover ist kein eigenes Element, sondern beschreibt den aktuellen Zustand des Links.

---

Interaktion

Diese Pseudoklassen reagieren auf Benutzeraktionen. Sie werden häufig für Navigationen, Buttons, Formulare und interaktive UI-Elemente eingesetzt.

• :hoverGilt, wenn sich der Mauszeiger über dem Element befindet.
• :focusGilt, wenn ein Element den Fokus besitzt, beispielsweise durch die Tab-Taste oder einen Klick.
• :activeGilt, während ein Element aktiviert wird, beispielsweise solange die Maustaste gedrückt bleibt.

Klasse und :hover

Pseudoklassen werden häufig mit Klassen kombiniert. Zuerst erhält die Box mit .demo-element ihre Grundgestaltung.

Ohne .demo-hover – keine Reaktion.

.demo-element {
    padding: 10px 20px;
    border: 1px solid chocolate;
    background: seashell;
    color: chocolate;
}

Die zusätzliche Klasse .demo-hover bestimmt, welches Element auf :hover reagiert. Im HTML erhält die Box beide Klassen: <p class="demo-element demo-hover">

Mit .demo-hover – fahre mit der Maus darüber.

.demo-hover:hover {
    background: chocolate;
    color: seashell;
}

Interaktion am Button

Beim Button lassen sich :hover und :active ausprobieren. Fahre mit der Maus darüber und halte die Maustaste gedrückt.

Hover oder Klick

.demo-interaction {
    padding: 10px 20px;
    border: 1px solid chocolate;
    background: seashell;
    color: chocolate;
    font: inherit;
}

.demo-interaction:hover {
    background: chocolate;
    color: seashell;
}

.demo-interaction:active {
    background: indigo;
    color: white;
}

Fokus beim Eingabefeld

Ein Eingabefeld erhält den Fokus durch einen Klick oder mit der Tab-Taste.

Name

.demo-focus {
    padding: 10px 20px;
    border: 1px solid chocolate;
    background: seashell;
    color: chocolate;
    font: inherit;
}

.demo-focus:focus {
    outline: 3px solid deeppink;
}

---

Hyperlinks

Für Hyperlinks gibt es die speziellen Pseudoklassen :link und :visited. Diese gelten ausschliesslich für echte Links (<a href="...">).

Zusätzlich können Hyperlinks mit :hover, :focus und :active gestaltet werden.

• :linknoch nicht besuchter Link
• :visitedbereits besuchter Link

Link-Zustände werden häufig gemeinsam gestylt. Dafür können mehrere Pseudoklassen mit Kommas zu einem Gruppenselektor kombiniert werden.

nav a:link,
nav a:visited {
    color: white;
}

a vs. a:link

a ist der Elementselektor für alle Links – unabhängig vom aktuellen Zustand. Styles auf a wirken grundsätzlich auf alle Link-Zustände (:link, :visited, :hover, :focus, :active), sofern sie nicht überschrieben werden.

a:link ist eine Pseudoklasse und gilt nur für noch nicht besuchte Links. Styles auf a:link wirken ausschliesslich in diesem einen Zustand.

Empfehlung: Der gemeinsame Grundstil für Hyperlinks wird in der Regel mit a definiert. Einzelne Zustände werden nur überschrieben, wenn sie anders aussehen sollen.

---

Struktur

Struktur-Pseudoklassen beziehen sich auf die Position eines Elements innerhalb seines Eltern-Elements. Sie sind nützlich für Listen, Navigationen oder wiederkehrende Layout-Strukturen.

• :first-childerstes Kindelement im Container
• :last-childletztes Kindelement im Container
• :nth-child()n-tes Kindelement (Position zählt alle Kinder)
• :first-of-typeerstes Element dieses Typs im Container
• :nth-of-type()n-tes Element dieses Typs im Container
• :emptyvollständig leeres Element

---

1. :first-child & 2. :last-child

Diese Pseudoklassen beziehen sich auf die Position eines Elements innerhalb seines Eltern-Elements und nicht auf Interaktion.

Typischer Einsatz sind Listen oder wiederkehrende Strukturen, bei denen das erste oder letzte Element gezielt gestaltet werden soll.

• Nummer eins
• Nummer zwei
• Nummer drei
• Nummer vier

li:first-child{
    font-weight: bold;
    color: red;
}
li:last-child{
    font-weight: bold;
    color: green;
}

Wählt das erste bzw. letzte Kindelement innerhalb eines Containers.
Wichtig: :first-child bedeutet „erstes Kind im Container" – nicht „erstes Element dieses Typs".

---

3. :nth-child()

:nth-child() wählt Elemente nach ihrer Position im Container. Damit kannst du z. B. Listen im Zebra-Style gestalten.

• Eintrag 1
• Eintrag 2
• Eintrag 3
• Eintrag 4
• Eintrag 5

.zebra li:nth-child(odd){background:#f3f3f3;}
.zebra li:nth-child(even){background:#e6e6e6;}

odd bedeutet ungerade (1, 3, 5, …), even bedeutet gerade (2, 4, 6, …).

:nth-child(4)

Mit :nth-child(4) wird exakt das vierte Kindelement im Container ausgewählt. 4 ist zwar eine gerade Zahl, aber hier geht es um die Position.
Wichtig: :nth-child() kann nicht nur odd/even, sondern auch Zahlen und Formeln.

• Eintrag 1
• Eintrag 2
• Eintrag 3
• Eintrag 4
• Eintrag 5

li:nth-child(4){
 background: salmon;
}

Formeln haben die Form An+B. n zählt hoch (0,1,2,...). Beispiel: 3n+1 trifft 1,4,7,10,...

Wichtig: n beginnt bei 0. Die Rechnung startet also mit 3·0+1 = 1. Gezählt werden aber nur echte Kindelemente (ab 1), da es kein „0. Kind" gibt.

li:nth-child(4){...}      /* nur das 4. Element */
li:nth-child(odd){...}    /* 1,3,5,... */
li:nth-child(2n+1){...}   /* ungerade (Formel) */
li:nth-child(3n+1){...} /* 1,4,7,10,... */
li:nth-child(3n){...}     /* jedes 3. Element: 3,6,9,... */

Merksatz: Bei :nth-child() wird ab 0 gerechnet, aber ab 1 gezählt.

---

4. :first-of-type

:first-of-type wählt das erste Element dieses Typs innerhalb des Containers – unabhängig davon, ob es das erste Kind ist.

.type-demo span:first-of-type {
    font-weight: bold;
    color: magenta;
}

---

5. :nth-of-type()

:nth-of-type() zählt nur Elemente des gleichen Typs (z. B. nur p). Das ist der Unterschied zu :nth-child(), das alle Kinder zählt.

Im folgenden Beispiel werden nur p-Elemente gezählt.

.type-demo2 p:nth-of-type(2){
    background: salmon;
}

---

6. :empty

:empty wählt Elemente aus, die weder Text noch Kindelemente enthalten.

p:empty {
    display: none;
}

Damit werden vollständig leere Absätze ausgeblendet. Bereits ein Leerzeichen oder Zeilenumbruch innerhalb des Elements verhindert, dass :empty greift.

---

Selektoren kombinieren

Bei kombinierten Selektoren zeigt der rechte Teil, was gestaltet wird. Die Selektoren davor bestimmen den Zusammenhang und die Bedingungen.

div:not(.home) h4 + p::first-line{
    color: red;
}

Leserichtung: ::first-line (Fragment) von einem p, das direkt nach einem h4 kommt, aber nur in div-Containern, die nicht .home sind.

Hinweis: ::first-line ist ein Pseudoelement. Das Beispiel zeigt also bewusst: Kombinieren geht über Kategorien hinweg (Selektoren + Pseudoklassen + Pseudoelemente).

---

Kurz gesagt

• :pseudoklasse beschreibt einen Zustand oder eine Position.
• Pseudoklassen wählen kein neues Element aus.
• :hover, :focus und :active reagieren auf Interaktion.
• Links besitzen eigene Zustände wie :link und :visited.
• :first-child und :last-child wählen das erste oder letzte Kindelement.
• :nth-child() zählt alle Kinder, :nth-of-type() nur Elemente desselben Typs.
• :empty wählt Elemente ohne Text und Kindelemente aus.

---

Verwandte Themen

• Logische Pseudoklassen – :not(), :is(), :where() und :has() filtern und kombinieren.
• Pseudoelemente – Teile eines Elements gestalten oder zusätzliche Inhalte erzeugen.

---