CSS: die Pseudoklassen
Was sind Pseudoklassen?
Pseudoklassen sind spezielle CSS-Selektoren, die verwendet werden, um Elemente basierend auf ihrem Zustand oder ihrer Position im Dokument auszuwählen. Sie ermöglichen es, Elemente basierend auf Benutzerinteraktionen oder internen Zuständen des Dokuments zu stylen.
Die Syntax für die Verwendung von Pseudoklassen ist:
selector:pseudo-class {property: value;}
Hier ist ein Beispiel:
a:hover {color:red;]
In
diesem Beispiel wir der Text in einem Anker-ELement rot,
wenn der Mauszeiger darüber schwebt.
Verwendung von Pseudoklassen:
:hover - Wird
angewendet, wenn der Mauszeiger über das Element schwebt.
:active - Wird angewendet, wenn das Element aktiv ist
(normalerweise beim Klicken).
:focus - Wird angewendet,
wenn das Element den Fokus erhält.
:first-child - Wird
auf das erste Kind eines Elements angewendet.
:last-child
- Wird auf das letzte Kind eines Elements angewendet.
:nth-child() - Wird auf ein Kind eines Elements anhand
seiner Position angewendet. Zum Beispiel :nth-child(odd) für
ungerade Kinder oder :nth-child(3) für das dritte Kind.
:nth-of-type() - Ähnlich wie :nth-child(), jedoch basierend
auf dem Typ des Elements.
:not() - Wird auf Elemente
angewendet, die nicht dem selektierten Selektor entsprechen.
:checked - Wird auf ein ausgewähltes Formularelement (wie
Checkboxen oder Radiobuttons) angewendet.
:disabled -
Wird auf deaktivierte Formularelemente angewendet.
:link:
Der link-Selektor ist eine dynamische Pseudoklasse und
kennzeichnet unbesuchte (:link) Verweise. Die Bezeichnung
:link ist dabei etwas ungünstig gewählt, denn es werden
keinesfalls alle Links selektiert, wie man zunächst vermuten
könnte.
button:hover {
background-color: lightblue;
}
/* Ändern der Schriftfarbe, wenn das Eingabefeld den Fokus erhält */
input:focus {
color: green;
}
/* Ändern des Stils des ersten Listenelements */
ul li:first-child {
font-weight: bold;
}
/* Hervorheben der ungeraden Tabellenzeilen */
tr:nth-child(odd) {
background-color: lightgray;
}
/* Hervorheben des ersten Absatzes in einem Abschnitt */
section p:first-of-type {
font-style: italic;
}