LU02d - Pseudo-Klassen
CSS-Pseudoklassen sind spezielle Bezeichnungen, die bestimmte Zustände von HTML-Elementen ansprechen und es ermöglichen, diesen Zustand gezielt zu stylen. Sie bieten eine mächtige Möglichkeit, das Verhalten von Elementen auf einer Webseite basierend auf Benutzerinteraktionen oder dem Kontext zu verändern.
:hover
Die Pseudoklasse ':hover
' wird aktiviert, wenn der Benutzer mit der Maus über das Element fährt.
Beispiel:
button:hover { background-color: lightblue; }
:active
Die Pseudoklasse ':active
' wird aktiv, wenn ein Element gerade angeklickt wird.
Beispiel:
button:active { background-color: darkblue; }
:focus
Die Pseudoklasse ':focus
' wird angewendet, wenn ein Element den Fokus hat, z.B. ein Eingabefeld.
Beispiel:
input:focus { border: 2px solid red; }
:first-child / :last-child
Diese Pseudoklassen beziehen sich auf das erste oder letzte Kind eines Elternelements.
Beispiel:
p:first-child { font-weight: bold; } p:last-child { color: gray; }
:nth-child
Mit ':nth-child()
' kann man ein bestimmtes Kind in einer Liste ansprechen.
Beispiel:
li:nth-child(2) { color: green; }