Pseudo-Klassen in CSS 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
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
und :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.

Bookmark setzen... These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Bloglines
  • MisterWong
  • MySpace
  • Reddit
  • SEOigg
  • Technorati
  • TwitThis
  • Y!GG
  • Google Bookmarks

Weiterführende Links: