CSS - Pseudoelemente und -klassen
Außerhalb eines Dokumentbaums und unabhängig von Elementen stehen die sogenannten Pseudoelemente und -klassen. So ist in (X)HTML kein Element vorgesehen, das die erste Zeile eines Absatzes umfasst. Hier kommen die Pseudoelemente und -klassen ins Spiel. Am häufigsten werden diese zur Formatierung der verschiedenen Zustände von Hyperlinks verwendet.
Pseudoelemente und -klassen kann man daran erkennen, dass vor dem Namen ein Doppelpunkt steht, wie z.B. bei :first-child.
| Pseudoklasse/-element | Erläuterung | Beispiel |
|---|---|---|
| Pseudoklassen | ||
| a:link, a:visited, a:hover, a:active, a:focus |
Pseudoklassen für Links. Für Beispiel und Erläuterungen siehe hier | siehe hier |
| :first-child | Mit :first-child lässt sich das erste Kindelement eines Elements auswählen | Über diese Zeile z.B. wird festgelegt, dass jeweils nur das erste Element einer Liste rot dargestellt wird: li:first-child { color: red; } |
| :lang (Sprachkürzel) |
Werden in einem Dokument Elementen bestimmte Sprachen zugewiesen, so kann man diese per :lang ansprechen | :lang(fr) { color: green; } sorgt für eine grüne Schrift des als Französisch gekennzeichneten Teils: <p>Der erste Satz von Proust <span lang="fr">A las recherche du temp perdu</span> lautet ...</p> |
| Pseudoelemente | ||
| :first-line | Mit :first-line kann man die erste Zeile eines Absatzes ansprechen. | p:first-line { background-color: gray } sorgt für einen grauen Hintergrund in der ersten Zeile. |
| :first-letter | Das Pseudoelement :first-letter hingegen wird dazu verwendet, eine besondere Formatierung für den ersten Buchstaben eines Textes festzulegen. So lassen sich z.B. mit p:first-letter Intiale nachbilden. | p:first-letter { color: red; } färbt den ersten Buchstaben eines Absatzes rot. |
| :before, a:after | :before und a:after dienen dazu, zusätzliche Inhalte vor oder nach einem Element einzufügen, und werden zusammen mit der Eigenschaft content benutzt. | p.wichtig:before { content: "Achtung"; } ergänzt das Wort Achtung vor Absätzen mit der Klasse wichtig. |