Stil mit {stil}

Mar 2009

CSS-Selektoren: Pseudoklassen

CSS-Pseudoklassen filtern keine HTML-Tags, sondern Elemente, die so im Dokument gar nicht vorkommen – z.B. Zustände von Elementen – z.B. einen Link oder ein anderes Element, über das die Maus gerade hovert oder einen Link, der bereits besucht wurde. Pseudoklassen werden im Stylesheet durch einen Doppelpunkt von Tagnamen getrennt notiert.

li:hover  input:focus  a:visited

Pseudolinks

Das Abfangen der verschiedenen Zustände eines Links wurde durch Link-Pseudoklassen bewältigt, die schnell von allen Browsern unterstützt wurden.

a:link    { background: thistle; }
a:visited { background: lavender; }
a:hover   { background: pink;  } 
a:focus   { background: lightpink; }
a:active  { background: plum; }

Die Reihenfolge der Pseudoselektoren 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: gray; color: white }

:hover – nicht nur bei Links

Heute unterstützen die meisten Browser das Ändern einer CSS-Eigenschaft beim Hovern mit der Maus nicht mehr nur bei a-Tags – auch IE, allerdings erst ab Version 7.

address:hover { 
   background: yellow;         /* Die Adresse soll gelb hinterlegt werden, */
   border: 2px solid maroon; } /* wenn die Maus über sie hovert            */

:focus

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

input#name { background: lavender; }
input#name:focus { background: white; }

:first-child

Die Pseudoklasse :first-child selektiert das erste Kind eines Elements – gleich, um welches Element es sich handelt.

td:first-child { background: thistle; color: darkred; }

Erste Zeile erste Spalte	Erste Zeile zweite Spalte	Erste Zeile dritte Spalte
Zweite Zeile erste Spalte	Zweite Zeile zweite Spalte	Zweite Zeile dritte Spalte
Dritte Zeile erste Spalte	Dritte Zeile zweite Spalte	Dritte Zeile dritte Spalte

:not

td:not(:first-child) { background: gainsboro; border: thistle; }

Erste Zeile erste Spalte	Erste Zeile zweite Spalte	Erste Zeile dritte Spalte
Zweite Zeile erste Spalte	Zweite Zeile zweite Spalte	Zweite Zeile dritte Spalte
Dritte Zeile erste Spalte	Dritte Zeile zweite Spalte	Dritte Zeile dritte Spalte

:focus mit Attribut-Selektor

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

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