The StyleWorksCSS { Referenz · Labor · Übungen }
  1. Startseite
  2. Referenz
  3. Das Pseudoelement :first-letter

CSS 2.1 · Pseudoelement

Pseudoelement Das Pseudoelement :first-letter

Vollreferenz zu Das Pseudoelement :first-letter aus CSS 1 und CSS 2.1 mit Syntax, Bedeutung, Beispiel und Browserunterstützung.

Erstveröffentlichung Lesezeit 4 min
stylesheet.css · Das Pseudoelement :first-letter
p::first-letter {
  outline: 2px solid #7A2FB0;
}

Überschrift

Erster Absatz direkt nach der Überschrift, mit einem Link und einem Zitat.

Zweiter Absatz, Klasse extra.

  • Erster Listenpunkt
  • Zweiter Listenpunkt mit Link
  • Dritter Listenpunkt

Dritter Absatz, ohne Klasse.

Selektorp::first-letter
Treffer–
Spezifität–

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-Werten block, list-item, table-cell, table-caption oder inline-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-Eigenschaften
  • color-Eigenschaften
  • background-Eigenschaften
  • text-decoration
  • vertical-align (wenn float:none gesetzt ist)
  • text-transform
  • line-height
  • margin-Eigenschaften
  • padding-Eigenschaften
  • border-Eigenschaften
  • float

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 oder padding 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.
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 oder padding 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 oder padding 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.