CSS/Selektoren/Pseudoelement/first-letter

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Das Pseudoelement ::first-letter spricht das erste Zeichen eines Elements zusammen mit dessen vorangestellter und nachfolgender Punktierung an. Es kann auf Block- und blockähnliche Elemente (inline-block, Listenpunkte, Tabellenüberschriften und -zellen) angewendet werden.

  • CSS 1.0
  • IE
  • Firefox
  • Chrome
  • Safari
  • Opera
Beispiel ansehen …
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Beispiele für das first-letter-Pseudoelement</title> <style> p::first-letter {color: green;} </style> </head> <body> <p>Auf das erste Zeichen kommt es an.</p> <p>*1 ist ein verbreiteter Code in Telefonsystemen.</p> <p><span>*</span>1 ist ein verbreiteter Code in Telefonsystemen.</p> </body> </html>
Im ersten Absatz wird der Buchstabe „A“ in grüner Schriftfarbe dargestellt. Es wird als einziges Zeichen formatiert, da es nicht von Punktierung umgeben ist.

Im zweiten Absatz wird sowohl das Sternchen, da es als Punktierung zählt, als auch die Ziffer „1“ in grüner Schriftfarbe dargestellt.

Im dritten Absatz wird das Sternchen mit grüner Schriftfarbe dargestellt. In diesem Beispiel ist die Zeichenfolge, die normalerweise von ::first-letter formatiert wird, durch ein Element getrennt. CSS stellt dem Browser frei, wie er damit umgeht. Entweder werden nur die nicht voneinander abgeschnittenen Zeichen formatiert oder die jeweiligen Abschnitte einzeln.

Folgende Eigenschaften können auf das first-letter-Pseudoelement angewendet werden: Innen- und Außenabstände, Rahmen, Hintergründe, Schriftbild, Textformatierung, float und vertical-align (diese aber nur, wenn float nicht verwendet wird). Darüber hinaus darf der Browser Zeilenhöhe, Höhe und Breite des Elements eigenständig an die enthaltenen Zeichen anpassen. Die Anwendbarkeit anderer Eigenschaften liegt im Ermessen der Browserhersteller.

Beachten Sie: Der Internet Explorer kennt bis Version 8 nur die Schreibweise mit einfachem Doppelpunkt (:first-letter).