CSS - Elemente - Links

1. Ein wichtiger Hinweis vorab

Merde

Eigentlich müsste dieses Kapitel "Pseudoelemente und Pseudoklassen" heißen. Da es da ein paar Feinheiten gibt, konzentriere ich mich hier auch erst mal nur auf besagte Linkformatierung mit Pseudoklassen. Auf die kompletten Verwendungsmöglichkeiten gehe ich darum später unter dem entsprechenden Punkt im Abschnitt Advanced CSS ein.

2. Elemente

Laut W3C/Spezifikation gibt es fünf Pseudoklassen:

:link (Link zu noch nicht besuchten Seiten)
:visited (Link zu bereits aufgerufenen Seiten)
:focus (wenn ein Link einen sog. Focus erhält, z.B. beim Durchklicken mit der Tabulatortaste)
:hover (wird beim Darüberfahren mit der Maus aktiviert)
:active (der gerade angeklickte Link)

3. Zuweisung

Ist ganz einfach. Wir nehmen als Selektor das a (für <a href="...">) und setzen die entsprechende Pseudo-Klasse direkt dahinter, also so.


a:link
{
  /* hier kommen jetzt die Anweisungen */
}
a:visited
{
  /* hier kommen jetzt die Anweisungen */
}
...

4. Klassen- und ID-Zuweisung

Wenn ihr bei Links mit speziellen CSS-Klassen oder -IDs arbeitet, so sieht die Syntax folgendermaßen aus:


a.klassenname:link
{
  /* hier kommen jetzt die Anweisungen */
}
a.klassenname:visited
{
  /* hier kommen jetzt die Anweisungen */
}
a#idname:link
{
  /* hier kommen jetzt die Anweisungen */
}
a#idname:visited
{
  /* hier kommen jetzt die Anweisungen */
}

5. Die Reihenfolge

An die müsst ihr euch strikt halten, also :link, :visited, :focus, :hover und zu guter Letzt :active. Man muss allerdings zwei Dinge dabei beachten. Erstens, wenn ihr optische Änderungen nur bei einem :hover vornehmen wollt, so reichen zwei Definitionen völlig aus. Eine fürs a und eine fürs a:hover. Und zweitens ...

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt