dciwam.de / faq / css / css-reihenfolge-pseudoklassen

Richtige Reihenfolge der link-Pseudo-Klassen

Meine Links werden nicht so dargestellt, wie ich das in den Cascading Style Sheets angegeben habe. Was tun?

Falls du Pseudo-Klassen verwendest, liegt das Problem möglicherweise in der Reihenfolge der Regeln für die Links. Ändere sie in:

a:link { color: red }
      /* link pseudo-class, noch nicht besuchter Link */
a:visited { color: blue }  
      /* link pseudo-class, schon besuchter Link */
a:hover { color: yellow }
      /* dynamic pseudo-class, Benutzer 'hovert' */
a:active { color: lime } 
      /* dynamic pseudo-class, Link wird ausgewählt */
a:focus { color: lime } 
      /* dynamic pseudo-class, Element akzeptiert Eingaben */

Jeder Link ist entweder noch nicht besucht worden oder er wurde bereits besucht. Falls er noch nicht besucht wurde, gilt die a:link-Pseudo-Klasse. Falls er bereits besucht wurde, dann gilt die a:visited-Pseudo-Klasse. Er kann zusätzlich zum "Zustand" visited (bzw. not-visited) noch den "Zustand" a:hover (für "darüber schwebend") und a:focus (ist ausgewählt / hat den Fokus) annehmen.

Definierst du a:hover vor a:visited, dann überschreibt die Definition für a:visited die Definition für a:hover.

Definierst du dagegen a:hover nach a:visited, dann überschreibt die Definition für a:hover die Definition für a:visited.

Damit sollte auch klar sein, warum a:active nach a:hover stehen sollte. a:active definiert die Eigenschaften, die ein aktiver Link (ein Link, auf den du gerade "draufdrückst") hat. Er besitzt die Eigenschaften not-visited oder visited und hover und active.

Ein besuchter Link oder ein Link über den man gerade mit der Maus fährt etc. ist eben auch ein Link, deshalb gehen die Regeln mit den Selektoren in die Kaskade ein.

Der Unterschied zwischen a:active und a:focus ist am besten zu verstehen, wenn man einen Link per Tastatur anspringt, statt mit der Maus drauf zu klicken. Mit Tastatur gibt es den Unterschied zwischen tab=ausgewählt (hat den Fokus) und return=aktiviert. Mit der Maus gibt es nur klick=aktiviert.

Siehe dazu:
http://www.w3.org/TR/REC-CSS2/selector.html#dynamic-pseudo-classes

Hinweis

Bei der Definition einer Textfarbe (color) sollte möglichst auch immer eine Hintergrundfarbe angeben werden (background-color bzw. background).

Oft wird background-color: transparent verwendet, wenn keine Hintergrundfarbe erwünscht ist. Jedoch macht transparent bei Netscape 4.xx die bekannten abenteuerlichen Fehler:

Ältere Browser unterstützen die Pseudo-Klassen nicht vollständig. Von daher ist es eventuell besser auf background-color: transparent zu verzichten und eine Validator-Warnung in Kauf zu nehmen. Es sei denn transparent wird in Verbindung mit background-image benötigt.

Siehe dazu:
http://css.nu/pointers/bugs.html oder auch
http://www.webreview.com/style/css1/charts/notes.shtml#532transparent

Björn Höhrmann · http://www.bjoernsworld.de
Rene v. Bulmerincq · http://www.inforunner.de
Huschiar Madjidi · http://www.netandmore.de
Gérard Schneider

Zum Seitenanfang

URL: http://dciwam.de/faq/css/css-reihenfolge-pseudoklassen | Letzte Änderung: 18.07.2005 | G. Schneider | Kontakt