6.2.13 Pseudoklassen

Pseudoklassen bieten die Möglichkeit, HTML-Elemente zu selektieren, die sich in einem bestimmten Zustand befinden oder bestimmte Kriterien erfüllen. Sie erweitern die Möglichkeiten von normalen Selektoren, ohne dass zusätzliche Klassen oder IDs im HTML definiert werden müssen.

Was sind Pseudoklassen?

Die Pseudoklasse :hover kennen wir alle. Sie wird verwendet, um ein Element zu selektieren, wenn der Mauszeiger darüber ist. Also typischerweise bei Links, die ihre Farbe ändern, wenn wir mit der Maus darüber gehen. Ausprobieren kann mal dies auch hier auf dieser Website.

Pseudoklassen sind spezielle Schlüsselwörter, die an einen Selektor angehängt werden und dessen Auswahl erweitern. Sie beginnen immer mit einem Doppelpunkt (:). Dadurch können wir beispielsweise das erste Kind eines Elements, den Zustand eines Links oder ein Element beim Hover (Überfahren mit der Maus) ansprechen.

Syntax von Pseudoklassen

Syntax von Pseudoklassen mit Beispiel

Häufig genutzte Pseudoklassen

Pseudoklassen erweitern die Möglichkeiten, Elemente basierend auf Zuständen, Positionen oder Benutzerinteraktionen auszuwählen. Hier sind die häufigsten Pseudoklassen zusammengefasst.

Pseudoklasse Beschreibung Anwendungsbeispiel
:hover Selektiert ein Element, wenn der Mauszeiger darüber ist. a:hover { color: red; }
:nth-child(n) Selektiert das n-te Kind eines Eltern-Elements (z. B. jede zweite Zeile einer Tabelle). tr:nth-child(2n) { background: gray; }
:first-child Selektiert das erste Kind eines Eltern-Elements. p:first-child { font-weight: bold; }
:focus Selektiert ein Element, wenn es den Fokus hat, z. B. ein aktives Eingabefeld. input:focus { border-color: blue; }
:checked Selektiert Checkboxen, Radio-Buttons oder andere auswählbare Elemente, die markiert sind. input:checked { background: green; }
:link Selektiert Verweise auf noch nicht besuchte Seiten. a:link { color: blue; }
:visited Selektiert Verweise auf besuchte Seiten. a:visited { color: purple; }
:active Selektiert ein Element, das gerade angeklickt wird (aktiv ist). a:active { color: red; }

Beispiele

Mit den Pseudoklassen :link, :visited, :hover, :active und :focus können wir Links vollständig formatieren. Die Reihenfolge ist dabei wichtig und wird auch als LVHA-Reihenfolge bezeichnet:

1
2
3
4
5
a:link { color: blue; }    /* Noch nicht besuchter Link */
a:visited { color: purple; } /* Besuchter Link */
a:hover { color: red; }    /* Link bei Mouseover */
a:active { color: orange; } /* Link während des Klickens */
a:focus { outline: 2px solid yellow; } /* Link im Fokus */

Mit der Pseudoklasse :hover können wir das Verhalten eines Links ändern, wenn die Maus darüber fährt.

1
2
3
4
a:hover {
    color: red;
    text-decoration: underline;
}

Wenn wir das HTML wie folgt definieren:

<a href="#">Beispiel-Link</a>

wird der Text des Links rot und unterstrichen, sobald die Maus darüber geht.


3. Hintergrundfarbe für gerade Zeilen in einer Tabelle

Die Pseudoklasse :nth-child kann genutzt werden, um jede zweite Zeile einer Tabelle zu stylen.

1
2
3
tr:nth-child(even) {
    background-color: #f2f2f2;
}

Mit folgendem HTML:

1
2
3
4
5
<table>
  <tr><td>Zeile 1</td></tr>
  <tr><td>Zeile 2</td></tr>
  <tr><td>Zeile 3</td></tr>
</table>

wird jede gerade Zeile (Zeile 2, Zeile 4, ...) mit einer hellgrauen Hintergrundfarbe dargestellt.


4. Fokus-Styling für Eingabefelder

Die Pseudoklasse :focus ermöglicht es, Eingabefelder zu stylen, wenn sie aktiv sind.

1
2
3
4
input:focus {
    border-color: blue;
    outline: none;
}

Beim Übertragen auf HTML:

<input type="text" placeholder="Fokussiere mich!">

wird der Rahmen des Eingabefelds blau, sobald es den Fokus hat (z. B. durch einen Klick).


Warum Pseudoklassen verwenden?

Pseudoklassen sind eine gute Möglichkeit, dynamische oder besondere Zustände von Elementen zu stylen, ohne den HTML-Code mit zusätzlichen Klassen oder IDs zu belasten. Sie sind besonders nützlich, um Zustände wie Hover, Fokus oder die Position eines Elements innerhalb eines Eltern-Containers zu berücksichtigen.


Hinweis: Es gibt auch Pseudo-Elemente wie zum Beispiel ::before und ::after, die ähnlich wie Pseudoklassen funktionieren, jedoch genutzt werden, um Inhalte vor oder nach einem Element einzufügen und zu gestalten. Auf diese gehen wir hier aber nicht weiter ein. Weitere Informationen finden Sie auf der MDN-Webseite zu Pseudo-elements.