Advanced CSS - Pseudoklassen und Pseudoelemente
1. Allgemeines zur Verwendung
Pseudoklassen und -elemente können auf mehrere Arten an HTML-Tags gebunden werden. Nämlich über den Typ-, Klassen-, ID-Selektor sowie den verschiedenen Kombinationsmöglichkeiten.
h1:hover
h3.blubb:hover
div#bla:hover
.blubb:hover
Wichtig
Pseudoklassen und -elemente können nicht im style
-Attribut definiert werden. OK, kann man schon machen
und es mosert auch der W3C-Validator nicht herum. Bringt nur leider nichts und wird von den Browsern ignoriert.
2. "Link"-Pseudoklassen für normale Elemente
Die folgenden kann man auch auf Elemente anwenden, die keine Links sind. Als da wären.
:focus
:hover
:active
h1:hover {
color: #ff0;
}
h1:active {
color: #f00;
}
h1:focus {
color: #00f;
}
...
<h1 tabindex="1">Headline</h1>
Erläuterung
.hover
kennt ihr ja schon. :active
greift, wenn man mit der Maus auf ein Element klickt und die Taste
gedrückt hält. Was das soll, weiß ich auch nicht. :focus
dagegen funktioniert nur dann, wenn man etwas auswählt.
Normalerweise klappt das aber nur bei bestimmten Elementen, nämlich Links und Formularelementen. Ansonsten muss man mit dem
Attribut tabindex
arbeiten. Ist in obigem Fall aber kein valides HTML. Funktioniert trotzdem.
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt