CSS 2.1 ::Referenz ::Pseudo-Elemente
CSS 2.1: Das Pseudoelement :first-letter
Allgemeines:
Dieses Pseudoelement selektiert das erste Zeichen der ersten Zeile des aktuellen Elementes. Es ist damit möglich, dieses Zeichen durch seine typografische Formatierung besonders herauszustellen. Das Pseudoelement :first-letter
kann für alle Elemente, die Text enthalten, definiert werden. Ein Anwenderprogramm kann Zeilenhöhe, Breite und Höhe des Elements abhängig von der Form des Zeichens bestimmen, anders als es im Line- Box- Modell definiert wird.
Das Pseudoelement :first-letter
wird stets wie ein Inline- Level- Element behandelt, wenn float:none
deklariert ist. Anderenfalls wird es wie ein floatiertes Element behandelt.
Pseudo-Elemente :first-letter
müssen eine Reihe von Bedingungen erfüllen:
- Am Anfang stehende Punktuationszeichen wie Hochkomma, Anführungszeichen u. a. werden mitselektiert.
- Buchstabenkombinationen am Wortanfang wie z. B. 'Ae' im Deutschen oder 'Ij' im Holländischen werden ganz in die Selektion eingeschlossen.
- Eine Ziffer am Textbeginn wird ebenfalls selektiert. Beginnt der Text mit einer Ziffernreihe, wird nur die erste Ziffer selektiert.
- Sie können nur innerhalb von Elementen mit den
display
-Wertenblock
,list-item
,table-cell
,table-caption
oderinline-block
definiert werden. - Wenn am Anfang eines Absatzes Inline- Level- Elemente wie
span
,img
usw. stehen, dann existiert kein selektierbares erstes Zeichen und:first-letter
bleibt ohne Wirkung. - Da ein
:first-letter
immer in der ersten Zeile erscheinen muss, kann er nie nach einem Zeilenumbruch<br />
auftreten. - Wenn der Browser generierten Inhalt mit dem Pseudo-Element
:before
unterstützt, dann gilt:first-letter
für den generierten Inhalt.
Standardstreue Browser müssen mindestens die folgenden Eigenschaften auf Pseudoelemente :first-letter
anwenden, alle anderen Eigenschaften können auch angewandt werden:
font
-Eigenschaftencolor
-Eigenschaftenbackground
-Eigenschaftentext-decoration
vertical-align
(wennfloat:none
gesetzt ist)text-transform
line-height
margin
-Eigenschaftenpadding
-Eigenschaftenborder
-Eigenschaftenfloat
Das Pseudoelement :first-letter
hat in der Kaskade Vorrang vor :first-line
.
Eine gemeinsame Einschränkung gilt für alle Pseudoelemente: Sie dürfen nur am Ende aller Selektoren notiert werden, sie müssen also als letztes vor der öffnenden geschweiften Klammer stehen. Ebenfalls nicht erlaubt ist die gleichzeitige Verwendung mehrerer Pseudoelemente im selben Selektor.
Code-Beispiele:
P { font: 1em sans-serif; } H1 + P:first-letter { font: italic bold 3em serif; float: left }
p:first-line:first-letter { color: navy; } /* Verboten! */
h1.titelzeile:first-letter { color: navy; } /* Erlaubt. */
h1:first-letter.titelzeile { color: navy; } /* Verboten! */
Browserunterstützung
Das Pseudo-Element :first-letter
wird von den modernen Browsern in Großen und Ganzen unterstützt, mit folgenden Einschränkungen:
- IE/Win 5.0
- IE/Win erkennt dieses Pseudo-Element erst ab Version 5.5.
- IE 7
- IE 7 honoriert die Eigenschaft
float
nicht in Verbindung mit der Pseudoklasse:first-letter
. - Bestimmte Buchstabenkombinationen an Textbeginn, wie 'Ae' oder das holländische 'Ij' erkennt er nicht.
- Da IE 7 noch keinen generierten Inhalt kennt, kann er auch das erste Zeichen daraus nicht selektieren.
- Formatierungen mit
margin
,border
oderpadding
werden nicht wie an Inline- Level- Elementen behandelt, sondern geraten in den Bereich der nächsten Zeile. Zudem werden sie beim Scrollen durch die folgenden Zeile abgeschnitten. Nach Öffnen und Schließen eines anderen Fensters werden sie vollständig dargestellt.
- IE 7 honoriert die Eigenschaft
- Firefox 1.5
- Auch die Gecko-Engine erkennt noch nicht zusammen gehörende Buchstabenkombinationen am Anfang des Absatzes.
- Opera 9
- Auch bei Opera bis Version 9 können die Formatierungen mit
margin
,border
oderpadding
mit der nächsten Zeile überlappen. Dieser Browser erkennt ebenfalls noch nicht zusammen gehörende Buchstabenkombinationen am Anfang des Absatzes. Zudem selektiert er das erste Zeichen nicht in generiertem Inhalt. - Konqueror 3.5
- Formatierungen mit
margin
,border
oderpadding
können in die folgenden Zeile hineinragen. Zusammen hängende Buchstabenkombinationen am Textbeginn werden auch hier nicht selektiert. Bei Formatierung von generiertem Inhalt mit:first-letter
werden einige Eigenschaften des zugehörigen Elementes übernommen.
Eric Meyer's CSS2 Test Suite zeigt am praktischen Beispiel, wie die Browser mit dieser Eigenschaft umgehen.
Keine Eigenschaft und kein Selektor stehen in einem Stylesheet für sich allein. In der Praxis kann das Zusammenspiel zwischen verschiedenen Elementen und Selektoren einen nicht zu unterschätzenden Einfluss auf die Fähigkeiten der Browser haben. Bugs treten oft erst durch das Zusammenwirken mehrerer Eigenschaften an unterschiedlichen Elementen auf.
Besonderheiten im Medientyp handheld
:
Dieses Pseudo-Element ist nicht Teil des Standards CSS Mobile Profile 1.0. Auch von einer Umsetzung durch einzelne Mobilgeräte ist nichts bekannt.
Wechselwirkungen:
font
, color
, background
, text-decoration
, vertical-align
, text-transform
, line-height
, margin
, padding
, float
, text-shadow
, clear
Ausblick:
CSS3 wird als auffälligste Neuerung den Doppelcolon vor den Bezeichnungen einführen (::first-line
). Dies dient vor allem zur Unterscheidung der Pseudoelemente von den Pseudoklassen.
Verwendete Standards
Dieser CSS-Referenz liegen folgende Spezifikationen zugrunde: CSS 1, CSS 2.1 CR und CSS Mobile.