Im Gegensatz zur Pseudoklasse first:child sprechen Pseudoelemente
Teile eines HTML-Elements an – also nicht das ganze Element. In CSS1
gibt es zwei Pseudoelemente: first-line und first-letter. Sie können
auf Blockelemente (HTML-Elemente, die mit einem Zeilenumbruch enden wie p,
h1) angewendet werden und setzen neue typografische Feinheiten um. Pseudoelemente
werden durch einen Doppelpunkt, gefolgt vom Namen des Pseudoelements notiert
und können mit normalen Klassen kombiniert werden (p.initial:first-line).
CSS1 beschreibt die beiden folgenden Pseudoelemente:
• :first-letter – erster Buchstabe in einem Element • :first-line – erste Zeile in einem Element
:first-letter ändert das erste Zeichen eines Elements
– das beliebteste Beispiel ist sicherlich die hängende Initiale,
die den edlen Anschein antiquarischer Werke erweckt.
:first-line verändert die Darstellung der ersten Zeile.
Ein Schnellschuss-Teaser für eilige Redakteure ...
• p { font-family: Verdana, sans-serif; color: #333333; }
• p:first-letter { font: 40px/100% Georgia; color:
tomato; float: left; margin-top: 0px; margin-right: 6px; }
• h1 { font-size: 22px; line-height: 150%; color: #666666; }
• h1:first-line { font-size: 14px; color: #333333; }
Dies ist die Fussleiste. Niemand muss sich um sie kümmern – sie rutscht einfach tiefer, wenn der Inhalt mehr und mehr wird.
