Pseudo, das hört sich schlimmer an als es ist. Pseudo-Klassen
beschreiben in einer besonderen Form den Zustand eines Elementes.
Hier erfahren Sie, welche Pseudo Klassen es in CSS 1 und CSS 2 gibt,
und wie man diese anwendet.
Pseudoklassen sind eine besondere Form einer CSS Klasse. Sie beschreiben
den Zustand eines Elementes. Dieser Zustand kann z.B. dynamisch
sein, dies ist bei Links der Fall. So gibt es bei Links, wie im
Artikel "CSS – Links gestalten"
beschrieben wurde, die unterschiedlichen Zustände. Diese können
mit CSS formatiert werden. Neben den Pseuo-Klassen für Links
gibt es jedoch noch weitere Pseudo-Klassen, die mit CSS 2 erst das
Licht des Webs entdeckt haben.
Syntax von Pseudo-Klassen
Die Anwendung von Pseudo-Klassen erfolgt in CSS nach einem festen
Schema. Zunächst wird die Klasse, oder das Element definiert,
und dann, getrennt von einem Doppelpunkt kommt die Pseudo-Klasse
die den jeweiligen Zustand, oder die Eigenschaft beschreibt.
.a:focus
{color: #ff0000}
Dieses Beispiel definiert eine Klasse "a". Das Element,
das sich auf diese Anweisung bezieht befindet sich gerade im fokussierten
Zustand.
Ein anderes Beispiel definiert das <input> Element bei HTML
Formularen:
input:focus
{color: #ff0000}
Die Pseudo-Klassen an sich
:focus Wie schon im oberen Beispiel wird durch diese Pseudo-Klasse
der fokussierte Zustand eines Elementes beschrieben. Das ist z.B.
der Zustand, wenn man sich mit einem Cursor in einem Eingabefeld
befindet. Das Element ist ausgewählt.
:lang()
Diese Pseudo-Klasse ist noch recht jung. Hierbei werden die
Elemente angesprochen, die sich auf eine bestimmte Sprache beziehen.
In den Klammern wird der Sprachcode angegeben. Dieser entspricht
dem Länderkürzel.
Beispiel:
p:lang(de)
{color: #00ff00}
p:lang(en)
{color: #ff0000}
p:lang(fr)
{color: #0000ff}
Hierbei wird das Aussehen der Paragraphen definiert, die eine deutsche,
englische, oder französische Sprachdefinition haben.
:first-child
Die Pseudo-Klasse first-child beschreibt das erste Element eines
Baumes. Bei einer Liste ist dies der erste Listenpunkt.
style.css
li:first-child
{color: #ff0000}
css_4.html
<html><head>
<title>
CSS - Beispiel 4
</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<ul>
<li>Erste Element</li>
<li>Zweite Element</li>
<li>Dritte Element</li>
</ul>
</body>
</html>
Das Ergebnis, wiederum nur mit Netscape 6 oder Opera zu sehen:
CSS Pseudo-Klasse first-child
Pseudo-Klassen für den Ausdruck…
Neu in CSS 2 sind einige Pseudo-Klassen, über welche man das
Dokument an sich beschreiben kann, bzw. wie es in verschiedenen
Medien aussehen soll (als Beispiel verwenden wir die gedruckte
Ausgabe eines Textes).
:left:right
Diese Pseudo-Klassen geben an, wie ein ausgedrucktes Dokument "aussehen"
soll. Hierbei wird nicht auf Formatierungen Wert gelegt, sondern
auf Positionierung. Sie geben an, wie das Dokument, sofern es auf
der linken Seite eines Heftes gedruckt wurde, positioniert wird,
und andersherum.
So können Sie das Format so definieren, das der ausgedruckte
Text ohne Probleme gelocht und abgeheftet wird.
Soll eine Seite z.B. gelocht werden, so muss man die Abstände
zum Rahmen ein wenig vergrößern, da man sonst in den
Text "locht".
Das waren soweit alle Pseudo Klassen in CSS 1 und CSS 2.