Pseudo-Elemente

Pseudo-Elemente sind Teile einer Webseite, die sich nicht durch ein eindeutiges HTML-Tag ansprechen lassen (z.B. ein besuchter Link).

Standardmäßig weden Hyperlinks unterstrichen dargestellt. Für die Farben verwenden die Browser die Standardeinstellungen, solange keine anderen Eigenschaften festgelegt werden. Mit Pseudo-Formaten für Links können sowohl Farben als auch spezielle Schriftformate für Links festgelegt werden, die Unterstreichungen unterdrücken oder Hintergründe definieren, die einen Textmarker-Effekt erzeugen.

Für Links gibt es folgende Pseudo-Elemente, die man auch als Zustände bezeichnen könnte:

a:link - ein unbesuchter Link
a:visited - ein besuchter Link
a:hover - ein gerade mit der Maus überfahrener Link
a:active - ein gerade angeklickter Link

Damit Pseudo-Formate für Links richtig angezeigt werden, muss in der CSS-Definition die oben angegebene Reihenfolge eingehalten werden. Wenn eines der Formate nicht benötigt wird, kann es einfach weggelassen werden.

Definition von Pseudo-Formaten

<html>
<head>
<title>Linkformate</title>
<style type="text/css">

</style>
</head>

Klassen für Pseudo-Elemente

Häufig möchte man ein Pseudo-Element einsetzen, aber nicht alle betroffene Tags damit formatieren, oder es sollen für Pseudo-Elemente unterschiedliche Formate definiert werden. Für solche Zwecke kommen (Unter-)Klassen für die Pseudo-Elemente zum Einsatz mit Hilfe derer man verschiedene Formate festlegen kann.

Bsp.

a.rot: link { color:#ff0000; }
a.rot: visited { color:#606060; text-decoration:none }

a:link { color:#000000; }
a:visited { color: #606060; }

» drucken: pdf | html