Beschreiben Sie Pseudoklassen und Pseudo-Elemente in…

Pseudoklassen und Pseudoelemente erweitern die Möglichkeiten von CSS-Selektoren, indem sie es erlauben, Stile basierend auf dem Zustand, der Position oder anderen Eigenschaften eines Elements anzuwenden, die nicht durch einfache Selektoren ausgedrückt werden können.

Pseudoklassen

Pseudoklassen beginnen mit einem einzelnen Doppelpunkt (:). Sie werden verwendet, um ein Element in einem bestimmten Zustand zu stylen.

Hauptpseudoklassen:

:hover - stylt das Element beim Überfahren mit der Maus.
:active - stylt das Element während des Klicks (Aktivierung).
:focus - stylt das Element, das momentan den Fokus hat (z.B. nach einem Klick auf einen Link oder ein Eingabefeld).
:visited - stylt besuchte Links.
:link - stylt unbesuchte Links.
:first-child - stylt das erste Kind seines Elternteils.
:last-child - stylt das letzte Kind seines Elternteils.
:nth-child(n) - stylt das n-te Kind seines Elternteils. n kann eine Zahl, ein Schlüsselwort (even, odd) oder ein Ausdruck (2n+1) sein.
:nth-last-child(n) - stylt das n-te Kind von hinten.
:not(selector) - stylt Elemente, die nicht dem angegebenen Selektor entsprechen.

/* Beispiel für die Verwendung von Pseudoklassen */
a:hover {
  color: blue; /* Ändert die Farbe des Links beim Überfahren */
}

input:focus {
  border-color: green; /* Ändert die Rahmenfarbe des Eingabefelds beim Fokus */
}

li:first-child {
  font-weight: bold; /* Stilisiert das erste Listenelement */
}

Pseudoelemente

Pseudoelemente beginnen mit zwei Doppelpunkt (::). Sie werden verwendet, um einen bestimmten Teil eines Elements zu stylen oder um generierten Inhalt vor oder nach dem Inhalt des Elements einzufügen.

Hauptpseudoelemente:

::before - fügt generierten Inhalt vor dem Inhalt des Elements ein. Wird häufig mit der content-Eigenschaft verwendet.
::after - fügt generierten Inhalt nach dem Inhalt des Elements ein. Erfordert ebenfalls die content-Eigenschaft.
::first-letter - stylt den ersten Buchstaben eines Textblocks.
::first-line - stylt die erste Zeile eines Textblocks.
::selection - stylt den vom Benutzer markierten Teil eines Elements.

/* Beispiel für die Verwendung von Pseudoelementen */
p::first-letter {
  font-size: 2em; /* Vergrößert den ersten Buchstaben des Absatzes */
  font-weight: bold;
}

h2::after {
  content: " ---"; /* Fügt Text nach der Überschrift hinzu */
  color: gray;
}

mark::selection {
  background-color: yellow; /* Ändert den Hintergrund des markierten Textes */
  color: black;
}

Historisch wurden Pseudoklassen mit einem einzelnen Doppelpunkt (:) für die Kompatibilität mit CSS2.1 verwendet, während Pseudoelemente in CSS3 begannen, doppelte Doppelpunkte (::) zu verwenden, um eine bessere Unterscheidung zu ermöglichen. Es wird empfohlen, in modernem Code doppelte Doppelpunkte zu verwenden.

Vergleichstabelle:

Merkmal	Pseudoklasse	Pseudoelement
Syntax	`:selector`	`::selector`
Zweck	Zustand des Elements	Teil des Elements oder generierter Inhalt
Beispiele	`:hover`, `:focus`, `:first-child`	`::before`, `::after`, `::first-letter`

Beschreiben Sie Pseudoklassen und Pseudo-Elemente in CSS.