CSS, HTML und Javascript mit {stil}

Pseudo Class :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)

:lang • :link • :visited • :target • :hover • :active • :focus • :enabled • :disabled • :checked • :indenterminate • :nth-child • :first-of-type

Pseudo-Elemente (doppelter Doppelpunkt)

::before • ::after • ::first-Line • ::last-line • ::first-letter • ::first-child • ::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 Pseudoklassen, 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-Selektoren ansprechen

Im HTML-Code können diese Elemente gar nicht erreicht werden, denn es gibt kein HTML-Tag für „die erste Zeile eines Absatzes“ oder „das erste Zeichen eines Absatzes“. Also kann die Darstellung nicht ohne Weiteres 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 }
E::first-child

Erstes Kind eines Eltern-Elements

td::first-child { font-weight: bold; color: green }
E::last-child

Letztes Kind eines Eltern-Elements

td::last-child { font-weight: bold; color: red }
E::first-line

Erste Zeile in einem Text

p::first-line { color: purple }
E::first-letter

Erstes Zeichen in einem Text

p::first-letter { color: purple }

Pseudo-Selektoren 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 Pseudoselektor :hover.

CSS2 erlaubt eine weitere Differenzierung, bei der die Pseudoklassen 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.