CSS - Elemente - Links
1. Merde
Eigentlich müsste dieses Kapitel "Pseudoelemente und Pseudoklassen" heißen. Leider ist die entsprechende Unterstützung im Internet Explorer 6.0 äußerst bescheiden, so dass es sich derzeit eigentlich noch nicht lohnt, auf dieses Thema zur Gänze einzugehen. Ich beschränke mich daher ausschließlich auf die Pseudoklassen für Links.
2. Elemente
Laut W3C/Spezifikation gibt es fünf Pseudoklassen:
:link(Link zu noch nicht besuchten Seiten):visited(Link zu bereits aufgerufenen Seiten):hover(wird beim Darüberfahren mit der Maus aktiviert):active(der gerade angeklickte Link):focus(wenn ein Link einen sog. Focus erhält, z.B. beim Durchklicken mit der Tabulatortaste)
Da :focus im Internet Explorer als :active interpretiert wird, und verschiedene Opera-Versionen laut SelfHTML
auch Probleme damit haben, sollte man diese Pseudoklasse mit Vorsicht genießen.
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, :hover, active
und zu guter Letzt :focus. 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 ...
... Unser Liebling
Nehmen wir mal an, dass wir den aktuellen Link (nicht mit a:active verwechseln!) mit einer zusätzlich benötigten
Klasse auszeichnen wollen, aber gleichzeitig auch noch alle besuchten Links hervorheben wollen. Leider spielt der Internet
Explorer 6 (mal wieder) nicht mit. Ein ...
a
{
/*Anweisung für alle Links */
}
a:hover
{
/*Anweisung für alle Links beim Hovern */
}
a:visited
{
/*Anweisung für alle besuchten Links */
}
a.aktiv
{
/*Anweisung für den aktuellen Link */
}
... funktioniert leider nicht, da diese Müllgurke (sorry Bill) die Klasse a.aktiv durch die Werte von
a:visited überschreibt. Da habt ihr zwei Möglichkeiten. Erstens, ihr legt alle(!) Eigenschaften pro Zustand genau
fest oder ihr macht es zweitens so wie ich und verweigert euch. Soll heißen, ihr lasst es aus Protest so langen bleiben, bis
auch wirklich der letzte Depp sich mal einen halbwegs vernünftigen Browser besorgt hat.