Was sind Pseudoklassen in CSS?

Pseudo-Klassen in CSS sind Schlüsselwörter, die zu Selektoren hinzugefügt werden, um einen besonderen Zustand des Elements anzugeben. Sie ermöglichen es, Stile basierend auf der Interaktion des Benutzers, der Position in der Dokumentenstruktur oder anderen Eigenschaften anzuwenden, die nicht durch Standard-Selektoren ausgedrückt werden können.

Beispiele für Pseudo-Klassen:

• Benutzungszustände:

  • :hover - Element, über das der Mauszeiger schwebt.
  • :active - Element, das aktiviert wird (z.B. durch Klicken auf eine Schaltfläche).
  • :focus - Element, das den Eingabefokus hat (z.B. ein Textfeld).
  • :visited - Link, den der Benutzer bereits besucht hat.
  • :link - Link, den der Benutzer noch nicht besucht hat.

• Position in der Struktur:

  • :first-child - erstes Kind seines Elternteils.
  • :last-child - letztes Kind seines Elternteils.
  • :nth-child(n) - n-te Kind seines Elternteils.
  • :first-of-type - erstes Element seines Typs unter den Kindern.
  • :last-of-type - letztes Element seines Typs unter den Kindern.

• Andere:

  • :empty - Element ohne Kinder oder Text.
  • :not(selector) - Elemente, die nicht dem angegebenen Selektor entsprechen.

Syntax:

selector:pseudo-class {
  property: value;
}

Beispiel für die Verwendung:

/* Ändert die Textfarbe beim Überfahren eines Absatzes mit der Maus */
p:hover {
  color: blue;
}

/* Stil für das erste Listenelement */
li:first-child {
  font-weight: bold;
}

Pseudo-Klassen erweitern die Möglichkeiten von Selektoren, um dynamischere und interaktivere Schnittstellen zu erstellen, ohne JavaScript für einfache Stiländerungen zu verwenden.