Sie können das Erscheinungsbild von Verweisen zu noch nicht besuchten Seiten, zu bereits besuchten Seiten und zu Elementen, die per Tastatur selektiert, gerade mit der Maus überfahren oder angeklickt werden, bestimmen.

Auch auf andere Elemente als Hyperlinks sind diese Pseudoklassen anwendbar. Sinnvoll kann das sein, wenn Elemente in irgendeiner Form wie Hyperlinks reagieren.

Beispiel

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Titel</title>
<style>
 
a:link {
   font-weight: bold;
   color: blue;
   text-decoration: none;
}
a:visited {
   font-weight: bold;
   color: gray;
   text-decoration: none;
}
a:focus {
   font-weight: bold;
   color: red;
   text-decoration: underline;
}
a:hover {
   font-weight: bold;
   color: green;
   text-decoration: none;
}
a:active {
   font-weight: bold;
   color: lime;
   text-decoration: underline;
}
h1:focus {
   background-color:red;
}
h1:hover {
   background-color:silver;
}
h1:active {
   background-color:green;
}
 
</style>
</head>
<body>
 
<h1>Bekannte Suchdienste</h1>
<ul>
<li><a href="http://www.google.de/">Google</a></li>
<li><a href="http://www.bing.com/">Bing</a></li>
<li><a href="http://de.yahoo.com/">Yahoo</a></li>
<li><a href="http://web.de/">Web.de</a></li>
</ul>
 
</body>
</html>

Erläuterung

Pseudoklassen können nur zentral definiert werden, also in einem style-Bereich oder in einem externen Stylesheet.

Notieren Sie zunächst einen Element-Selektor, dahinter einen Doppelpunkt, und dahinter den Namen einer Pseudoklasse. Im obigen Beispiel ist der Element-Selektor nur ein jeweils bestimmter Elementtyp, wie a: oder h1:. Möglich sind aber auch Angaben wie a.nav: oder #header ul li a:. Hinter dem Doppelpunkt wird die gewünschte Pseudoklasse notiert. Bei den Pseudoklassen für Hyperlinks stehen folgende zur Auswahl:

:link gilt für Verweise zu noch nicht besuchten Seiten,
:visited gilt für Verweise zu bereits besuchten Seiten,
:focus gilt für Elemente, die den Fokus erhalten, z.B. durch „Durchsteppen“ mit der Tabulator-Taste,
:hover gilt für Elemente, während der Anwender mit der Maus darüber fährt,
:active gilt für gerade angeklickte Elemente.

Den so definierten Pseudoklassen können Sie beliebige, geeignete CSS-Eigenschaften zuweisen.

Die Pseudoklassen :link und :visited sind speziell für Hyperlinks gedacht, also vor allem für a-Elemente gedacht. Die Pseudoklassen :focus, :hover und :active gelten dagegen auch für andere Elemente. Wenn Sie beispielsweise für h1:hover CSS-Eigenschaften definieren und dann mit der Maus über eine h1-Überschrift fahren, nimmt diese, solange die Maustaste über dem Bereich bleibt, die definierten Eigenschaften an.

Weitere Hinweise

Um die in der Regel gewünschte Darstellung der Pseudoklassen bei Hyperlinks zu erreichen, sollten Sie die Reihenfolge wie im obigen Beispiel einhalten:
1. :link, 2. :visited, 3. :focus, 4. :hover, 5. :active.

Die Pseudoklasse :focus wird in der Praxis seltener verwendet als die übrigen, da Tastaturbedienung unter grafischen Oberflächen nicht so verbreitet ist und seltener ausgetestet wird. Es ist jedoch ein ohne großer Aufwand realisierbarer Mehrwert-Effekt, auch die Situation „Anwender wählt Element mit Tastatur an“ als Pseudoklasse mit definierten Formaten zu bedienen.

Referenzinformationen

Layer-Technik und Transparenz < | > Pseudoelemente für Textabsätze

 

Korrekturen, Hinweise und Ergänzungen
Bitte scheut euch nicht und meldet, was auf dieser Seite sachlich falsch oder irreführend ist, was ergänzt werden sollte, was fehlt usw. Dazu bitte oben aus dem Menü Seite den Eintrag Diskutieren wählen. Es ist keine Anmeldung erforderlich, um Anmerkungen zu posten. Unpassende Postings, Spam usw. werden allerdings kommentarlos entfernt.