CSS/Selektoren/Pseudoklasse/any-link, link, visited

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Der Titel dieses Artikels ist mehrdeutig.


Das Thema Verweise in Internetseiten ist recht komplex und wird deshalb in diesem Wiki auch an weiteren Stellen und in anderen Zusammenhängen bearbeitet.

Die Pseudoklassen :link und :visited kennzeichnen unbesuchte (:link) sowie besuchte (:visited) Verweise. Die Bezeichnung :link ist dabei etwas ungünstig gewählt, denn es werden keinesfalls alle Links selektiert, wie man zunächst vermuten könnte, stattdessen selektiert :any-link alle Links. :any-link ist somit die Kombination aus :link und :visited. Verweise können a-, area- oder link-Elemente mit href-Attribut sein.

  • CSS 1.0
  • IE
  • Firefox
  • Chrome
  • Safari
  • Opera
Beachten Sie: Bösartigen Webprogrammierern erlaubte die Pseudoklasse :visited in Kombination mit gewissen Eigenschaften herauszufinden, ob die Besucher einer Webseite bestimmte Links besucht haben oder nicht (sog. History Stealing). Das ist natürlich mit Blick auf den Datenschutz sehr problematisch. Weil man sich dagegen außer durch komplettes Deaktivieren von CSS, was eine enorme Einschränkung darstellt, auch nicht wehren kann, unterstützen moderne Webbrowser nur eine sehr eingeschränkte Auswahl von Eigenschaften für diese Pseudoklasse.
  • IE 9
  • Leer
  • Leer
  • Leer
  • Leer
Beispiel: History Stealing
In modernen Browsern sind entsprechende Sicherheitslücken geschlossen.
Beispiel ansehen …
<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS-Beispiel: Link-Pseudoklassen</title> <style> body { font: 16px sans-serif; line-height: 2; } a { color: black; padding: 3px; } a:link { background-color: red; } a:visited { color: red; background-color: black; } </style> </head> <body> <ul> <li><a href="http://de.selfhtml.org">selfhtml</a></li> <li><a href="http://forum.de.selfhtml.org">selfhtml Forum</a></li> <li><a href="http://wiki.selfhtml.org">selfhtml wiki</a></li> </ul> </body> </html>
Zunächst werden alle Links in schwarzer Schrift dargestellt. Die unbesuchten werden mit einem roten Hintergrund versehen und für die besuchten Verweise wird die Farbgestaltung verändert.
Beachten Sie: Die Pseudoklassen :link und :visited schließen sich wechselseitig aus und weitere Links gibt es nicht. [Mathematisch: Die Mengen der besuchten und der unbesuchten Links sind disjunkt und überdecken die Menge der Links vollständig.]

Deshalb ist es bei vielen Anwendungsfällen möglich, auf eine der beiden Pseudoklassen zu verzichten.

Beispiel
a { color: red; } a:link { color: blue; }
a { color: blue; } a:visited { color: red; }
a:link { color: blue; } a:visited { color: red; }
Die Ergebnisse dieser 3 Beispiele sind identisch, nur die Wege um dorthin zu gelangen, sind unterschiedlich.
Im ersten werden zunächst alle Links in roter Farbe dargestellt, nachfolgend nur die unbesuchten in blauer Farbe. Im zweiten Beispiel werden zunächst alle Links in blauer Farbe dargestellt, nachfolgend nur die bereits besuchten in Rot und im dritten schließlich werden die Eigenschaften für die beiden Linkklassen einzeln festgelegt.
Beispiel: :any-link
a[href] { color: red; }
a:link { color: red; } a:visited { color: red; }
a:link, a:visited { color: red; }
a:matches(:link, :visited) { color: red; }
a:any-link { color: red; }
Alle Beispiele setzen die Schriftfarbe aller a-Verweise auf rot.
Beachten Sie: Derzeit (September 2015) unterstützen noch nicht alle Browser :any-link. Experimentell kann der Selektor mit Browserpräfix (:-moz-any-link bzw. :-webkit-any-link) verwendet werden.