CSS, HTML und Javascript mit {stil}

Pseudo-Klassen :hover, :link, :active, :focus, :visited

Pseudo Klassen und Pseudo-Elemente

hover, link, active, focus und visited erreichen HTML-Objekte, die so im Dokument gar nicht vorkommen. hover verändert Links, über denen die Maus gerade hovert. focus findet ein aktives input-Feld und visited erkennt einen Link, der bereits besucht wurde.

Pseudo-Klassen entstehen bei Phantom-Zuständen eines Elements, meist durch Benutzeraktionen, aber auch bei bestimmten Sprachen und basieren auf Informationen außerhalb des DOM-Baums. Pseudo-Klassen können an beliebigen Stellen der Selektor-Kette stehen (ein Pseudo-Element wie ::before oder ::after hingegen nicht).

Pseudo-Elemente sprechen Teile eines Elements ohne HTML-Markup an, z.B. die erste Zeile eines Absatzes (::firstLine) und können Elemente ohne HTML-Markup einfügen (::before, ::after). Sie können nicht inline in einem style-Attribut vereinbart werden und nur am Ende der Selektor-Kette stehen.

Sowohl Pseudo-Klassen als auch Pseudo-Elemente können nicht inline in das HTML-Element gesetzt werden – denken wir einmal an ein hover.

Pseudo-Klassen (einfacher Doppelpunkt)

:active :any :checked :default :disabled :empty :enabled :first-child :first-of-type :focus :hover :lang :last-child :last-of-type :link :not :nth-child nth-of-type :only-child :required :root :target :valid :visited

Pseudo-Elemente (doppelter Doppelpunkt)

::before • ::after • ::first-line • ::last-line • ::first-letter • ::selection

Pseudo-Klassen werden durch einen Doppelpunkt vom Selektor getrennt: a:hover oder li.activeItem:hover. Dabei darf kein Leerzeichen zwischen dem Element und dem Doppelpunkt stehen.

:hover und :focus sind dynamische Pseudo-Klassen, mit denen CSS auf Benutzeraktionen wie das Hovern mit der Maus und die Wahl eines Eingabefeldes mit dem Cursor oder Tastatur durch Ändern des Aussehen reagiert. :hover und :focus triggern auch einfache Animationen durch CSS transition.

Die :hover-Falle

Ein :hover-Selektor sollte nicht ohne Weiteres für wichtige Aktionen eingesetzt werden, denn auf Smartphones und Tabletts gibt es kein :hover. Der Finger toucht ein Element oder tippt es doppelt – aber es gibt kein Überstreichen wie mit der Maus.

Tabletts und Smartphones übersetzen ein hover über einem Link direkt in einen Mausklick.

Pseudo-Klassen ansprechen

Im HTML-Code können diese Elemente gar nicht erreicht werden, denn es gibt kein HTML-Tag für „beim Hovern“ oder „hier warst du schon mal“. Also kann die Darstellung nicht durch ein style-Attribut beeinflusst werden.

E:link

Alle Elemente E, die ein Hyperlink zu einem noch nicht besuchten Ziel sind

a:link { text-decoration: none; color: purple; }
E:visited

Alle Elemente E, die ein Hyperlink zu einem bereits besuchten Ziel sind

a:visited { text-decoration: none; color: purple; }
E:active

Während das Element E aktiv ist (z.B. Maustaste auf einen Link gedrückt ist).

a:active { background-color: #8FBC8F }
E:hover

Während die Maus über dem Element E hovert

li:hover { background-color: #8FBC8F }
E:focus

Während der Fokus auf dem Element E liegt

input:focus { background-color: lavender }

Pseudo-Klassen für Links

Link-Pseudo-Klassen fangen die Zustände eines Links ab: Maus liegt über dem Link, Link wurde schon besucht. Diese CSS-Eigenschaften wurden schon früh von allen Browsern unterstützt.

1 a:link { background-color: thistle }
2 a:visited { background-color: lavender }
3 a:hover { background-color: pink } 
4 a:focus { background-color: aquamarine; color: black }
5 a:active { background-color: oldlace }
6 a:visited:hover{background-color:gray;color:white }

Die Reihenfolge der Pseudo-Selektoren muss wie hier :link, :visited, :hover, :focus, :active sein. Ansonsten überschreibt z.B. :visited den Selektor :hover.

CSS2 erlaubt eine weitere Differenzierung, bei der die Pseudo-Klassen hintereinander geschaltet sind. Wenn der Browser diese Funktionalität unterstützt, muss der Hintergrund eines bereits besuchten Links blau werden und seine Schrift weiß, wenn die Maus über ihm hovert:

a:visited:hover { background-color: gray; color: white }

hover – nicht nur bei Links

  • lists
    • list-style-image
    • list-style-position
    • list-style-type
  • CSS Positionieren
    • float
    • clear
    • position
  • Inhalte generieren
    • counter-increment
    • counter-reset

Früher unterstützten die meisten Browser das Ändern einer CSS-Eigenschaft beim Hovern mit der Maus nur bei a-Tags. Heute klappt es auch mit anderen HTML-Elementen: Listen, Tabellenzellen, Texte in Absätzen usw..

So erhalten z.B. Tabellenzeilen mit tr:hover einen farbigen Hintergrund, wenn die Maus über ihnen hovert und die Navigationsleiste zeig ein Pull-Down oder – wie hier – ein Fly-Out-Menü.

Aber wie oben unter »Die hover-Falle«: Auf dem Touch-Device – dem Tablett und dem Smartphone – gibt es kein :hover.

Eine Navigation sollte darum nicht mehr ohne Erkennung von Touch Devices auf :hover beruhen.

ul.col ul { 
   display: none
}
ul.col li:hover ul {
   list-style: none;
   display: block; position: absolute;
   left: 14em; z-index: 10; margin-top: -2em;
   width: 12em
}

So kommen wir dann mit CSS an eine aufpoppende Navigation ganz ohne Javascript. Das funktioniert auch in Internet Explorer, allerdings erst ab IE 7.

:focus

Die Pseudoklasse :focus entdeckt, ob ein Feld aktiviert ist – entweder durch einen Klick mit der Maus in das Feld oder durch eine Navigation mit dem Tabulator der Tastatur.

input#name { background-color: lavender }
input#name:focus { background-color: pink }

:focus funktioniert in IE 7 nur auf Links, nicht aber bei Eingabefeldern in Formularen.

focus mit Attribut-Selektor

input[type="password"]:focus { background-color: pink }

Wenn das Eingabefeld in den Fokus kommt, wird es pink hinterlegt.