Zurück: User Interface
Weiter: Weiterführende Informationen

Pseudoklassen und Pseudoelemente

Pseudoklassen

:first-child

Mit der Pseudoklasse :first-child wählen Sie das erste Kind-Element eines Elementes aus. Im folgenden Beispiel erscheint der Text des ersten Absatzes, der direkt Kind eines Elementes div ist, rot:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>Die Pseudoklasse ':first-child'</title>
<style type="text/css">
p {
   color: blue;
   background-color: transparent;
}
div > p:first-child {
   color: red;
   background-color: transparent;
}
</style>
</head>

<body>

<div>
<p>Dieser Absatz ist rot.</p>
<p>Dieser Absatz ist blau.</p>
<p>Dieser Absatz ist blau.</p>
<p>Dieser Absatz ist blau.</p>
</div>

</body>
</html>

Beispieldokument ansehen

:link, :visited, :hover und :active

Dies sind die so genannten Link-Pseudoklassen. Sicherlich kennen Sie den Effekt, dass Sie mit der Maus über einen Link fahren und dieser sich dann verändert, oder dass das Betätigen eines Links auch optisch dargestellt wird. Diese Effekte geben dem Besucher einer Seite das Gefühl, aktiv an der Seite teilzunehmen, er kann Elemente verändern und sieht das Klicken mit der Maus optisch umgesetzt. Das lässt sich mit CSS sehr einfach realisieren, jedoch gibt es wesentliche Dinge, auf die Sie achten sollten.

  • Wenn Sie sich bereits mit Usability und Accessibility beschäftigt haben, wissen Sie, dass Links intuitiv als solche erkennbar sein sollten. Umgekehrt sollte es vermieden werden, dass gewöhnlicher Fließtext für einen Link gehalten wird. Daher gelten ganz einfache Regeln: Links sind unterstrichen dargestellt, Fließtext dagegen nicht. Womöglich ist es Ihnen auch schon einmal passiert, dass sie mit der Maus auf ein unterstrichenes Wort gefahren sind und versucht haben, es anzuklicken; dabei diente es nur der Betonung des Textes. Das ist sehr unglücklich. Oder sie wussten auf einer Seite nicht, wo es weitergeht, weil Sie keine Links ausmachen konnten.

Es gibt vier Link-Pseudoklassen, die optisch aufeinander aufbauen sollten.

  • Es ist wichtig, die Klassen im Stylesheet in genau dieser Reihenfolge anzugeben, da es sonst zu Missinterpretationen kommen kann.
:link
Definiert das Aussehen gewöhnlicher Links. Der Anwender ist gewöhnt, Links in blauer Farbe und unterstrichen vorzufinden.
:visited
Definiert das Aussehen bereits besuchter Links. Diese sollten sich nicht wesentlich, am besten nur in der Farbe, von nicht besuchten Links unterscheiden. Es empfiehlt sich, eine hellere, nicht so ganz auffällige Farbe zu wählen. Allerdings sollte der Link weiterhin als solcher zu erkennen sein.
:hover
Definiert das Aussehen von Links, auf denen der Mauscursor ruht. Hier sollten Sie einen auffälligen Effekt einbauen. Vielleicht ein Farbwechsel zu einer Komplementärfarbe oder einen dezenten Hintergrund.
:active
Definiert das Aussehen von aktiven, soeben geklickten Links. Dem Anwender sollte auch optisch dargestellt werden, dass er aktiv an der Seite teilnimmt, indem er den Hyperlink betätigt. Dies können Sie darstellen, indem sie einen Hintergrund einsetzen, die Hintergrundfarbe ändern oder gar einen Button-Klick simulieren.

Eine Regel für a:hover könnte dann zum Beispiel so aussehen:

a:hover {
   color: rgb(255,148,0);
   background-color: transparent;
}

Wenn Sie zwei inhaltlich unterschiedliche Linkarten auf einer Seite haben, beispielsweise zum einen die Hyperlinks in der Navigationsleiste, zum anderen die Hyperlinks im Fließtext, dann können Sie diese auch optisch variieren, zum Beispiel in der Farbe. Geben Sie den Links in der Navigation einfach eine eigene Klasse:

<div>
    Hier sind die Links:
    <a href="index.html" class="navigation">Startseite</a>
    <a href="copy.html" class="navigation">Copyright</a>
</div>

Für diese Links verwenden Sie folgende Selektoren:

a.navigation:link {
   color: #309;
   background-color: transparent;
}
a.navigation:visited {
   color: #666;
   background-color: transparent;
}
a.navigation:hover {
   color: rgb(255,148,0);
   background-color: transparent;
}
a.navigation:active {
   color: rgb(255,148,0);
   background-color: #ffa;
}

Es ist jedoch günstiger und strukturell schöner, die Linkklassen für das übergeordnete Element festzulegen, welches die Links enthält. Für eine Navigationsleiste könnte das zum Beispiel so aussehen:

<div id="navigation">
    Hier sind die Links:
    <a href="index.html">Startseite</a>
    <a href="copy.html">Copyright</a>
</div>

Die Selektoren wären dann wie folgt:

#navigation a:link {
   color: #309;
   background-color: transparent;
}
#navigation a:visited {
   color: #666;
   background-color: transparent;
}
#navigation a:hover {
   color: rgb(255,148,0);
   background-color: transparent;
}
#navigation a:active {
   color: rgb(255,148,0);
   background-color: #ffa;
}

Die Pseudoklassen :link und :visited lassen sich nur auf Anker anwenden. Die beiden anderen können Sie auch für andere Elemente festlegen, jedoch ist die Browserunterstützung diesbezüglich doch noch sehr bescheiden.

:focus

Wenn Sie mit der Tastatur durch die Anker einer Webseite navigieren, sehen sie einen Rahmen um den Anker, auf dem Sie sich gerade befinden. Wenn Sie in ein Textfeld klicken, können Sie darin schreiben. In diesen Situationen spricht man davon, dass das Element den Focus hat. Die Darstellung des Elementes in diesem Zustand können Sie beeinflussen. Das folgende Beispiel demonstriert darüber hinaus, wie Sie Pseudoklassen kombinieren können:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>Die Pseudoklasse ':focus'</title>
<style type="text/css">
textarea:first-child:focus {
   color: red;
   background-color: transparent;
}
</style>
</head>

<body>

<form action="" method="post">
<p><textarea name="statement1" id="statement1" rows="14" cols="70">
Dieser Text erscheint rot, wenn Sie in das Textfeld klicken,
das Textfeld also fokussiert wird.</textarea>

<textarea name="statement2" id="statement2" rows="14" cols="70">
Dieser Text bleibt schwarz.</textarea></p>
</form>

</body>
</html>

Beispieldokument ansehen

Pseudoelemente

:before und :after

Auf diese beiden Pseudoelemente gehe ich im Abschnitt Generierter Content ausführlich ein.

:first-line

Mit dem Pseudo-Element :first-line können Sie spezielle Angaben für die erste Zeile eines Elementes vornehmen.

:first-letter

Mit dem Pseudo-Element :first-letter können Sie spezielle Angaben für das erste Zeichen eines Elementes vornehmen. Damit lassen sich sehr schöne, typografische Effekte erzielen.

Folgendes Beispiel wendet beide Pseudoelemente an:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>Die Pseudoelemente ':first-line' und 'first-letter'</title>
<style type="text/css">
p:first-line {
   font-variant: small-caps;
}
p:first-letter {
   font-size: 1.5em;
}
</style>
</head>

<body>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper suscipit lobortis nisl ut
aliquip ex ea commodo consequat.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper suscipit lobortis nisl ut
aliquip ex ea commodo consequat.</p>

</body>
</html>

Beispieldokument ansehen

Zurück: User Interface
Weiter: Weiterführende Informationen
Zum Seitenanfang