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;
}