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 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
1. Formatierung eines Links
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:
2. Hover-Effekt für Links
Mit der Pseudoklasse :hover
können wir das Verhalten eines Links ändern, wenn die Maus darüber fährt.
Wenn wir das HTML wie folgt definieren:
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.
Mit folgendem HTML:
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.
Beim Übertragen auf HTML:
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.