Müssen wir das wirklich haben? Nun ja, die CSS-Spezifikation gibt einen guten Grund an: In HTML gibt es für bestimmte ausgezeichnete Bereiche des Dokuments, wie etwa die erste Reihe eines Paragraphen, keine eigenen Tags. Deshalb ist der formatierende Zugriff zunächst unmöglich.
Pseudoelemente und -klassen sollen das Problem lösen. Sie sind sozusagen Hilfstags bzw. relative Verweise, die allerdings im Dokumentenbaum (DOM) unsichtbar bleiben.
| Muster | Erklärung | Beispiel |
|---|---|---|
| :first-child | das erstgeborene Folgeelement (ist mißverständlich, es geht nicht um das zeitlich zuerst in die Seite geschriebene, sondern das zuerst stehende Element! | Absatz 1: Hier sind zum Zeigen in td mehrere Paragraphen. Absatz 2. Im Kopf stehen td>p:first-child { color:blue } und td * span:first-child{ color:red } Absatz 3. Wie ist wohl dieser rote Erstgeborene entstanden? |
| :link :visited | unbesuchter bzw. besuchter Link; Die beiden Zustände schließen einander aus. MIt Hilfe von Klassendefinitionen lassen sich Differenzierungen unter den Links einbauen. Zulässiges, aber sinniges Beispiel aus der Spezifikation rechts: Dazu gehören die Style-Angaben im Head: a.test{color:green} a.test:visited {color:white} | Diese Seite neu laden. Der Link ist verbraucht, wenn man die Seite sieht. Es könnte aber sein, daß der Browser dies nach längerer Zeit vergißt. |
| :hover :active :focus | Dynamische Pseudoklassen. hover meint Veränderungen beim Überfahren mit der Maus, active bei gedrückter und festgehaltener Maustaste, focus betrifft, richtig: den Fokus, also den gerade geltenden Link | |
| :lang | Lang steht für Language, die Sprache. Die muß in HTML ohnehin erklärt sein, weshalb man CSS in diesem Falle nicht braucht. Allerdings lassen sich bei mehreren Sprachen in einem Dokument gezielte Zugriffe erzielen | :lang(de)> table { color:red } würde auf einer Seite, die die richtigen lang="de"-Einträge besitzt, ganze Tabellen einfärben. |
| Muster | Erklärung | Beispiel |
|---|---|---|
| :first-line | Die erste Reihe eines Blockelements, wie div oder p. | Hier auf der Seite ist der Eintrag td>p:first-line{ text-transform:uppercase } und dies ist ein Paragraph, es sollte also hier (Paragraph als Kind einer Tabellenzelle) eine ausgezeichnete erste Zeile geben. (Blau wegen des first-child-Eintrags.) |
| :first-letter | Betrifft den ersten Buchstaben eines Textes. | Hier ist erklärt p#erst :first-letter{ font-size:200%; font-weight:bold; float:left; }. Die Erklärungszelle links hat <p id="erst">. Wenn man nichts sieht, wie bei mir, hat man Pech. Dann bleibt nur der gute alte Weg, an den Anfang ein Bildchen zu zaubern. |
| :before :after | Dienen dazu, generierten Text vor oder nach einem vorhandenen Seitenelement zu platzieren. Dazu zählen etwa automatische Zählungen, Texteinträge, vorangestellte Bilder etc. | Testparagraph mit den Style-Angaben p.notiz:before{ content: "$ "} p.notiz{background-color:#ddd} und dem Code <p class="notiz">Testparagraph</p> |
| zu :before und :after content | erforderliche Angaben zu :before und :after. Möglich sind : String (Text), Uri, Counter, attr(X), open-quote, no-open-quote, no-close-quote.attr(X) gibt den Wert des Attributs als String zurück. Die drei letzten betreffenden Anführungsstriche, die etwa sprachabhängig unterschiedlich formatiert werden sollen. Wo die vorangestellten Texte angeordnet werden, wird durch die display-Eigenschaft festgelegt. | Ein Counter-Aufruf könnte lauten: p:before{ content:counter( num, upper-roman ) ". "} |