Advanced CSS - Pseudoklassen und Pseudoelemente
1. Vorwort
Bei den Links habe ich euch ja bereits einen ersten Einblick in die Materie gezeigt. Kommen wir nun zum Eingemachten. Aber vorab noch der folgenden wichtige Hinweis. Was ich euch jetzt zeige, wird vom Internet Explorer 6 größtenteils nicht unterstützt. Und auch der 7er macht hier sehr gerne schlapp. Ich weise euch aber dezidiert darauf hin.
2. 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.
3. "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 Elemente klickt und die Taste
gedrückt halt. 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.
Der Internet Explorer
Die 6.0-Version kommt damit überhaupt nicht klar. Und der 7er akzeptiert nur :hover. Erst seit dem 8er gibt es keine
Probleme mehr.