8. Pseudoklassen

Mit Pseudoklassen formatieren Sie unter anderem die verschiedenen Zustände der Schaltflächen, die sich beispielsweise verändern, wenn Sie mit der Maus über eine Schaltfläche des Navigationsmenü fahren :hover. Pseudoklassen können nur über CSS formatiert werden, da z.B. :hover weder als HTML-Tag noch als Attribut gibt. Daraus geht auch der Name "Pseudo" hervor. Da diese Pseudoklassen sehr häufig verwendet werden, hier die detaillierte Erklärung im Überblick:

Pseudoklasse Formatierung
:link Formatiert den originalen Zustand des Anker-Tags
:visited Formatiert den besuchten Link. Das Aussehen des Links, nachdem er angeklickt wurde
:hover Formatiert den Zustand, wenn die Maus über den Link gestellt wird
:active Formatiert den Zustand, den man sieht, wenn der Link aktiviert bzw. gerade angeklickt wird

Es gibt aber auch noch weitere Pseudoklassen wie :first-child, das alle ersten Kindelemente eines Elements formatiert.

9. Pseudoelemente

Wie schon bei den Pseudoklassen erwähnt, gibt es auch bei den Pseudoelementen keine direkte Entsprechung im XHMTL. Formatiert werden Elemente, die sich zum Beispiel durch ihre spezielle Position im Dokument auszeichnen, beispielsweise die erste Zeile, der erste Buchstaben etc.

 
Erster Buchstabe mit pseudoklassen formatieren
p:first-letter {
	font-size: 500%;
	float: left;
	margin-right: 5px;
	color: gray;
	font-style: italic;
}

Analog dazu formatiert das Pseudoelement :first-line die erste Zeile eines Elements und bietet bei langen, unübersichlichen Textpassagen dem Lesenden Unterstützung:

 
Erste Linie eines Absatz mit dem Pseudoelement first-line formatieren
p:first-line {
	color: #000;
	font-weight: bold;
}

Pseudoelemente können noch mehr Erstaunliches, denn sie generieren sogar Inhalte:

 
Anführungszeichnen mit Pseudoelementen before und after content erstellen
h1:before {
	content: "\00AB";
	color: maroon;
}
h1:after {
	content: "\00BB";
	color: maroon;
}

Mithilfe der hexadezimalen Version der Unicode-Zeichen für französische Anführungszeichen \00AB bzw. \00BB haben wir hier die hübschen Anführungszeichen eingefügt.


Pseudoelement Formatierung
:after Nach einem HTML-Element
:before Vor einem HTML-Element
:first-letter Das erste Zeichen einer Zeile
:first-line Die erste Zeile in einem Absatz