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