CSS/Selektoren/Pseudoelement/first-letter
Aus SELFHTML-Wiki
< CSS | Selektoren | Pseudoelement
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.
Beispiel
So sieht's aus
<!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>
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überhinaus 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).
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-letterformatiert 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.