Die Pseudo-Elemente für Hyperlinks

Neben den bereits bekannten Element-Selektoren (XHTML-Tag-Zuweisungen) und Class-Selektoren (freie Namensvergabe und Verwendung des Attributs class="") existieren noch die sogenannten Pseudo-Elemente. Von allen relevanten Browsern fehlerfrei interpretiert wird hierbei nur das Pseudo-Element :link mit drei Partnerelementen (die Pseudo-Elemente :first-letter & :first-line werden nicht vom noch relevanten IE5/Win interpretiert, die Elemente ;focus, :lang, :first-child, :before und :after nicht einmal vom IE6/Win)

Für die Darstellungsdefinition von Hyperlinks existieren fünf Elemente, von denen vier allgemein unterstützt werden (:focus dient zur Navigation zwischen Verweisen mittels Tabulator-Taste, wird aber nicht ausreichend unterstützt):

: link
Mit dem Pseudo-Element :link wird die Darstellung eines noch nicht besuchten Hyperlink (Verweis) definiert.

: hover
Hiermit wird die Darstellung eines Hyperlink beim "überfahren" mit dem Cursor (Maus) definiert.

: active
Hiermit wird die Darstellung eines Hyperlink bei Klick mit dem Cursor (Maus) modifiziert.

: visited
Hiermit wird die Darstellung eines bereits besuchten Hyperlink angegeben.

Die Standard-Schreibweise sieht dabei wie folgt aus:

a:link { color: #ff0000 }
bzw.
a:hover { color: #00ff00 }
bzw.
a:active { color: #0000ff }
bzw.
a:visited { color: #cccccc }

Interessant ist hierbei, dass es nun möglich ist, Verweise innerhalb eines (X)HTML-Dokuments unterschiedlich darzustellen:

a:link {font-size: 12pt;}
td a:link {font-size: 11pt; font-style: bold}

Dies bedeutet: Alle Verweise im Dokument werden in der Schriftgröße 12 Punkt angezeigt, steht ein Verweis jedoch innerhalb einer Tabellenzelle, so wird er in 11 Punkt und fett dargestellt.

Es können alle Eigenschaften verwendet werden, die auf Text angewandt werden können, also z.B. die Änderung der Textfarbe, der Schriftfamilie, farbige Hintergründe, usw..

Populär ist hierbei die Eigenschaft text-decoration mit dem Wert none, da so die Standard-Unterstreichung von Verweisen ausgeschaltet werden kann.

Standardeinstellung: Browsereinstellung
Vererbung: ja

Beispiel:
So sieht's aus  

Demo in ext. CSS:
a:link {
font-weight: bold;
color: #CC3300;
text-decoration: none;
background-color: #FFCC00;
}

a:hover {
font-weight: bold;
color: #CC3300;
text-decoration: none;
background-color: #CCCCCC;
}

a:active {
font-weight: bold;
color: #006600;
text-decoration: none;
background-color: #B3FBAF;
}

a:visited {
font-weight: bold;
color: #666666;
text-decoration: none;
background-color: #FFCC00;
}

div a:link {
background-color: transparent
}