CSS-Pseudoklassen

CSS Attributselektoren CSS Pseudoelemente

Pseudoklassen ermöglichen es, verschiedene Zustände eines Elements gezielt anzusprechen. Zum Beispiel, wenn sich der Mauszeiger darüber befindet, wenn es den Fokus erhält oder wenn es das erste Kind des Elternelements ist.

Was ist eine Pseudoklasse?

Pseudoklassen werden mit einem Doppelpunkt (:) gekennzeichnet und zielen auf Zustände, Positionen oder spezielle Fälle ab, die mit normalen Attributen nicht erreichbar wären.

Pseudo-class	Beschreibung
:hover	Wird angewendet, wenn sich der Mauszeiger über dem Element befindet.
:focus	Wird angewendet, wenn das Element (z. B. ein Eingabefeld) den Fokus erhält.
:nth-child()	Wählt ein Kind-Element mit bestimmter Reihenfolge aus.
:first-child	Wählt das erste Kind des Elternteils aus.
:last-child	Wählt das letzte Kind des Elternteils aus.

Interaktive Pseudoklassen

Mit diesen Pseudoklassen können wir auf Interaktionen reagieren, z. B. wenn ein Link mit der Maus überfahren wird oder ein Eingabefeld angeklickt wird.

Im folgenden Beispiel wird die Farbe eines Links bei hover rot, während ein Textfeld im Fokus einen grünen Rahmen erhält.

Strukturelle Pseudoklassen

Strukturelle Pseudoklassen beziehen sich auf die Position eines Elements innerhalb seines Elternteils. Damit können wir einfach das erste, letzte oder ein bestimmtes Kind-Element formatieren.

Tipps zur Verwendung von Pseudoklassen

Pseudoklassen erleichtern die zustands- und strukturbasierte Formatierung. Hier einige Ratschläge:

Verwende :hover und :focus für eine bessere Benutzererfahrung.
Mit strukturellen Pseudoklassen vermeidest du unnötige zusätzliche Klassen im HTML.
Vermeide zu komplexe :nth-child()-Regeln, um die Übersichtlichkeit des Codes zu wahren.