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.
Die Pseudoklasse ':hover' wird aktiviert, wenn der Benutzer mit der Maus über das Element fährt.
Beispiel:
button:hover {
background-color: lightblue;
}
Die Pseudoklasse ':active' wird aktiv, wenn ein Element gerade angeklickt wird.
Beispiel:
button:active {
background-color: darkblue;
}
Die Pseudoklasse ':focus' wird angewendet, wenn ein Element den Fokus hat, z.B. ein Eingabefeld.
Beispiel:
input:focus {
border: 2px solid red;
}
Diese Pseudoklassen beziehen sich auf das erste oder letzte Kind eines Elternelements.
Beispiel:
p:first-child {
font-weight: bold;
}
p:last-child {
color: gray;
}
Mit ':nth-child()' kann man ein bestimmtes Kind in einer Liste ansprechen.
Beispiel:
li:nth-child(2) {
color: green;
}