CSS Level 1 :link  nach oben

Die :link Pseudo-Klasse beschreibt ein A-Element (Link/Anker), wenn es sich dabei um einen Link und nicht um einen Anker handelt (also wenn es das href-Attribut enthält). Diese Klasse kann nur bei A-Elementen angewandt werden. Beispiel:

A:link { ... }
/* Alle Elemente A die ein Link sind */

CSS Level 1 :visited  nach oben

Die :visited Pseudo-Klasse bezieht sich auf ein A-Element, wenn der Link bzw. das Dokument auf das er führt bereits besucht wurde. Diese Klasse kann nur bei A-Elementen angewandt werden. Beispiel:

A:visited { ... }
/*Alle Elemente A deren Zieldokument bereits besucht wurde*/

CSS Level 1 CSS Level 2 :active  nach oben

Die :active Pseudo-Klasse beschreibt ein Element, wenn dieses aktiv ist. Nach CSS 1 darf diese Klasse nur bei A-Elementen angewandt werden - CSS Level 2 beschreibt sie jedoch für alle Elemente. Beispiel:

A:active { ... }
/*Alle Elemente A die gerade aktiv sind (CSS 1)*/

INPUT:active { ... }
/*Alle Elemente INPUT die gerade aktiv sind (CSS 2)*/

CSS Level 2 :hover  nach oben

Die :hover Pseudo-Klasse bezieht sich auf ein Element, über dem sich die Maus befindet/über dem die Maus schwebt (engl. hover = schweben). Damit sind die sogenannten Hover-Effekte (z.B. Veränderung der Farbe eines Links, wenn ihn die Maus überfährt) möglich. Beispiel:

A:hover { ... }
/*Alle Elemente A über denen sich die Maus befindet (Hover-Effekt)*/

CSS Level 2 :focus  nach oben

Die :focus Pseudo-Klasse beschreibt ein Element, das gerade den Fokus besitzt (beispielsweise ein markiertes Element oder ein Eingabefeld in das gerade eingegeben werden kann). Beispiel:

INPUT:focus { ... }
/*Alle Elemente INPUT die den Fokus besitzen*/

CSS Level 2 :lang()  nach oben

Die Psuedo-Klasse :lang() bezieht sich auf die (definierte) Sprache eines Elementes. Diese Sprache muss dazu als Sprach-Code in den Klammern notiert werden. Beispiel:

P:lang(de) { ... }
/*Alle Elemente P mit deutscher Sprachdefinition*/

P:lang(en-US) { ... }
/*Alle Elemente P mit US-englischer Sprachdefinition*/

CSS Level 2 :first-child  nach oben

Die Pseudo-Klasse :first-child beschreibt das Element, wenn es das erste "Kind" eines anderen Elements ist. Alle zweiten, dritten, vierten (usw.) "Kinder" werden somit ausgeklammert. Beispiel:

LI:first-child { ... }
/*Alle Elemente LI die das erste "Kind" eines Elementes sind.*/

<!-- in HTML: -->
<ul>
 <li>erstes Kind</li>
 <li>zweites Kind</li>
 <li>drittes Kind</li>
 ...
</ul>

CSS Level 2 :left und :right  nach oben

Die Pseudo-Klassen :left und :right dienen der Definition von Dokumentvarianten bei denen ein Seitenumbruch stattfindet (z.B. beim Ausdruck des Dokumentes). :left und :right beschreiben dabei die Lage der Seite, also wie das Dokument aussehen soll, wenn es als rechte (:right) oder linke (:left) Seite ausgedruckt werden soll. Dies könnte z.B. dann eine Rolle spielen, wenn das Ausgedruckte Dokument abgeheftet werden soll - dann wäre es somit möglich beispielsweise immer auf der Seite des Blattes auf der das Blatt gelocht werden soll den Rand etwas weiter zu definieren, so dass erstens beim Lochen keine Buchstaben mit weggelocht werden und zweitens der andere Rand dennoch genau mit dem Blatt abschließt. Es sind aber auch andere Einsatzgebiete denkbar. Die folgende Grafik soll dies verdeutlichen:

Verwendung der Pseudo-Klassen :left und :right
Darstellung: Verwendung der Pseudo-Klassen :left und :right

Beispiel:

@page :left { margin-right:3cm; margin-left:2cm; }
@page :right { margin-right:2cm; margin-left:3cm; }

CSS Level 2 :first  nach oben

:first beschreibt den Ausdruck bzw. die Darstellung der ersten Seite des Dokuments. So wäre es denkbar beispielsweise hier (auf der Ersten Seite) den Rand etwas breiter zu gestalten, sodass sich diese Seite optisch merklich von den anderen abhebt. Es sind aber auch andere Einsatzgebiete denkbar. Beispiel:

@page :first { margin: 25%; }

Verknüpfung  nach oben

Wenn Pseudo-Klassen mit Elementen verknüpft werden, ist dies recht einfach (Elementname:Klasse). Bei weiteren Klassifizierungen des Elements ist darauf zu achten, dass die Pseudo-Klasse wiederum hinter der Klassifizierung zu stehen hat. Beispiel:

A#abc:active { ... }
/*Alle Elemente A der ID abc die aktiv sind*/

TABLE INPUT.def:focus { ... }
/*Alle Elemente INPUT die innerhalb eines Elements TABLE liegen,
  der Klasse def angehören und den Fokus besitzen*/