CSS 2.1 · Pseudoklasse
Pseudoklasse Link-Pseudoklassen
Vollreferenz zu Link-Pseudoklassen aus CSS 1 und CSS 2.1 mit Syntax, Bedeutung, Beispiel und Browserunterstützung.
Link-Pseudoklassena:link { outline: 2px solid #7A2FB0; }
Überschrift
Erster Absatz direkt nach der Überschrift, mit einem Link und einem Zitat
.
Zweiter Absatz, Klasse extra.
- Erster Listenpunkt
- Zweiter Listenpunkt mit Link
- Dritter Listenpunkt
Dritter Absatz, ohne Klasse.
Allgemeines
Link-Pseudoklassen werden dazu genutzt, besuchte und noch nicht besuchte Links zu unterscheiden. Sie sind deshalb per Definition nur für Quellanker, das sind A-Elemente mit dem Attribut href, zugelassen und die Deklarationen A:link und :link haben denselben Effekt. Das Verhalten einiger Browser, diese Deklaration auch auf Zielanker (A-Elemente mit einem Attribut name) anzuwenden, ist nicht korrekt.
Link-Pseudoklassen schließen sich gegenseitig aus, da ein Link nur den Status 'Besucht' oder 'Nicht besucht' haben kann. Sie dürfen aber mit einer oder mehreren Dynamischen Pseudoklassen kombiniert werden.
Für Link-Pseudoklassen sind zwei Selektoren möglich:
:link:visited
Diese Selektoren sind Statusangaben vergleichbar, die ein Element durch Interaktionen des Benutzers (hier: verfolgen eines Links) annehmen kann.
Pseudoklasse :link
Mit Hilfe der Pseudoklasse :link werden Regeln für noch nicht besuchte Hyperlinks definiert.
Pseudoklasse :visited
Mittels der Pseudoklasse :visited werden Regeln für bereits besuchte Hyperlinks definiert. Anwenderprogramme dürfen nach einer gewissen Zeit den Status eines besuchten Links wieder auf 'nicht besucht' zurücksetzen.
Reihenfolge der Pseudoklassen
Die Reihenfolge, in der die Pseudoklassen im Stylesheet notiert werden sollten, ergibt sich allein aus der Kaskade. Wenn Gewicht, Ursprung und Spezifizität mehrerer Regeln gleich hoch sind, erhält die zuletzt notierte Regel den Vorrang. Das bedeutet:
Tipp:
Pseudoklassen wurden bisher in der Reihenfolge :link, :visited, :hover, :active notiert. Heute, im Zeitalter der standardstreuen Browser, ist eine andere Reihenfolge besser. Der Artikel Dynamische Pseudoklassen und benannte Anker erklärt, welches Problem mit der hergebrachten Reihenfolge auftritt und wie man es umgeht.
- Die Pseudoklasse
:visitedsollte nach:linkauftreten, wenn die Regel für Links zu bereits besuchten Websites Vorrang vor der Regel für allgemeine Links haben soll. - Aus dem gleichen Grund sollten die Regeln für dynamische Pseudoklassen erst hinter den Regeln für Link-Pseudoklassen stehen, da anderenfalls die dynamischen Pseudoklassen nicht dargestellt würden. Benutzer- Interaktionen hätten damit in Bezug auf Links keine Folgen.
- Innerhalb der dynamischen Pseudoklassen muss
:activeals letzte deklariert werden, wenn aktive Links angezeigt werden sollen.
Hinweis:
Es gibt eine Missbrauchsmöglichenkeit für die Pseudoklassen :link und :visited. Mit ihrer Hilfe lässt sich ohne Wissen des Besuchers feststellen, welche Websites dieser Besucher aufgerufen hat.
Code-Beispiel
:link:active, :visited:active { color: #ffffff; }
Browserunterstützung
- Die Link-Pseudoklassen werden von allen modernen Browsern erkannt.
Eric Meyer's CSS2 Test Suite zeigt am praktischen Beispiel, wie die Browser mit dieser Eigenschaft umgehen.
Keine Eigenschaft und kein Selektor stehen in einem Stylesheet für sich allein. In der Praxis kann das Zusammenspiel zwischen verschiedenen Elementen und Selektoren einen nicht zu unterschätzenden Einfluss auf die Fähigkeiten der Browser haben. Bugs treten oft erst durch das Zusammenwirken mehrerer Eigenschaften an unterschiedlichen Elementen auf.
Die Reihenfolge entscheidet
Die vier Zustände eines Links werden über Pseudoklassen desselben Gewichts angesprochen. Trifft mehr als eine zugleich zu, und das ist der Normalfall, entscheidet allein die Reihenfolge im Stylesheet: die zuletzt notierte Regel gewinnt.
Daraus folgt die bekannte Reihenfolge. Zuerst die beiden Zustände, die einander ausschließen, also besucht und nicht besucht, danach die Zustände, die währenddessen auftreten können: die Mausberührung und der Moment des Klickens. Wird diese Reihenfolge umgestellt, verschwindet die Wirkung der Mausberührung auf besuchten Links, weil die Regel dafür überschrieben wird.
Die Seite nennt außerdem eine oft übersehene Einschränkung: die Link-Pseudoklassen gelten nur für Elemente, die tatsächlich einen Verweis darstellen. Ein Element ohne Verweisziel gehört weder zum einen noch zum anderen Zustand.
Was der besuchte Zustand heute noch darf
Der besuchte Zustand verrät etwas über den Leser, nämlich wo er schon war. Solange sich eine solche Formatierung von einem Skript auslesen ließ, konnte eine Seite die Verlaufsliste ihres Besuchers abfragen, indem sie viele Verweise einbaute und deren Darstellung prüfte.
Darauf haben die Darstellungsmaschinen mit einer engen Grenze reagiert. Für besuchte Verweise sind nur noch wenige Eigenschaften wirksam, im Wesentlichen Farben, und die Abfrage der berechneten Darstellung liefert für diesen Zustand bewusst die Werte des unbesuchten. Der Unterschied ist damit für den Leser sichtbar und für das Dokument nicht mehr auslesbar.
Für die Gestaltung heißt das: Ein besuchter Verweis kann eine andere Farbe bekommen, aber keine andere Schrift, keinen anderen Rahmen und kein zusätzliches Zeichen. Wer mehr versucht, sieht keine Wirkung, und das ist keine Fehlfunktion, sondern Absicht.
Besonderheiten im Medientyp handheld
Die Pseudoklassen :link, :visited, :focus und :active sind Teil des Standards CSS Mobile Profile 1.0. Aufgrund der Einschränkungen vieler Mobilgeräte bei der Realisierung von Farben, Hintergründen und den Werten der Eigenschaft text-decoration wird oft kein Unterschied in der Darstellung dieser Pseudoklassen feststellbar sein.
Ausblick
CSS3 konzentriert sich nicht so sehr auf die Erweiterung bestehender Pseudoklassen, sondern eher darauf, neue Pseudoklassen zu entwickeln, die dem Besucher mehr Interaktionsmöglichkeiten und dem Webautor mehr Möglichkeiten zur Auszeichnung von Teilen des Dokuments bieten, die nicht im Dokumentstammbaum auftreten.
Verwendete Standards
Dieser CSS-Referenz liegen folgende Spezifikationen zugrunde: CSS 1, CSS 2.1 CR und CSS Mobile.