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