CSS Pseudoelement: :first-line – Referenz und Beispiel

stylesheet.css · Das Pseudo-Element :first-line

p::first-line {
  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-line

Treffer–

Spezifität–

Allgemeines

Nach CSS 2.1 bringt das Pseudoelement :first-line bestimmte Formatierungen an der ersten Zeile eines Block- Level- Elementes an.

Die Länge der ersten Zeile eines Absatzes ist von vielen Faktoren abhängig, dazu gehören u. a Bildschirmbreite, Schriftgröße oder Papierformat.

Ein Beispiel: Angenommen, beim Ausdruck einer Seite ist die erste Zeile der Druckseite länger als die erste Zeile auf dem Bildschirm. Dann werden die notierten CSS-Regeln auf die gesamte gedruckte Zeile angewandt, nicht nur auf die Worte, die am Bildschirm in der ersten Zeile gestanden haben.

Das Pseudoelement :first-line ist nur auf Block- Level- Elemente anwendbar, verhält sich jedoch mit einigen Ausnahmen wie ein Inline- Level- Element.

Die Eigenschaften, die mit :first-line für ein Element deklariert sind, müssen an der ersten Textzeile dieses Elementes immer angebracht werden. Dies gilt auch dann, wenn der Text sich innerhalb eines Nachfahrenelementes befindet (siehe zweites Beispiel unten).

Standardstreue Browser müssen mindestens die folgenden Eigenschaften auf Pseudoelemente :first-line anwenden, alle anderen Eigenschaften können auch angewandt werden:

font-Eigenschaften,
color-Eigenschaften,
background-Eigenschaften,
word-spacing,
letter-spacing,
text-decoration,
vertical-align,
text-transform,
line-height.

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

Allgemeines Beispiel:

p:first-line { font-variant: small-caps; }

Beispiel für Auswirkung auf Nachfahrenelement:

div:first-line { font-weight: bold; }

<div><p>Test<br />Test</p></div>

Soll-Ergebnis:

Test
Test

Erlaubte und nicht erlaubte Codierungen:

h1 + p:first-line { font-variant: small-caps; } /* Erlaubt.  */

h1:first-line + p { font-variant: small-caps; } /* Verboten! */

p:hover:first-letter { color: navy; }           /* Erlaubt.  */

p:first-letter:hover { color: navy; }           /* Verboten! */

p:first-line:first-letter { color: navy; }      /* Verboten! */

p em:first-line { font-variant: small-caps; }   /* Verboten! */

Browserunterstützung

Das Pseudo-Element first-line wird größtenteils von allen modernen Browsern unterstützt, mit kleinen Einschränkungen:

: Die Eigenschaft vertical-align wird innerhalb von Fließtext nicht zusammen mit :first-line angewandt. Auch Text, der sich innerhalb eines Nachfahrenelementes befindet, wird nicht formatiert.
IE/Win 5.0: IE/Win erkennt dieses Pseudo-Element erst ab Version 5.5.
Opera 9: Opera bis Version 9 produziert im Zusammenhang mit der Eigenschaft letterspacing gelegentlich Buchstabensalat am Zeilenende.
Konqueror 3.5: Konqueror wendet die Eigenschaft text-transform nicht auf dieses Pseudo- Element an. Dagegen bringt er die deklarierten Eigenschaften auch an Inline- Elementen an.

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.

Ein Pseudoelement mit beweglichen Grenzen

Wo die erste Zeile endet, steht nicht im Dokument. Es ergibt sich aus der Breite des Blocks, der Schriftgröße und dem Zeilenumbruch, und es ändert sich, sobald sich eines davon ändert. Der Text, den die Regel trifft, ist deshalb bei jeder Fenstergröße ein anderer.

Die Seite beschreibt das am Unterschied zwischen Bildschirm und Ausdruck. Dasselbe geschieht laufend beim Verändern der Fenstergröße: Wörter wandern in die erste Zeile hinein und wieder heraus, und die Formatierung folgt ihnen.

Damit unterscheidet es sich grundlegend von einem Selektor, der ein Element anspricht. Ein Element hat einen Anfang und ein Ende im Quelltext; diese Zeile hat beides erst nach dem Umbruch. Aus dieser Beweglichkeit folgen auch die Einschränkungen, welche Eigenschaften überhaupt zugelassen sind.

Nur ein Teil der Eigenschaften

Zugelassen ist im Wesentlichen, was die Zeichen selbst betrifft: Schrift, Farbe, Hintergrund, Zeichen- und Wortabstände, Unterstreichungen, Groß- und Kleinschreibung, Zeilenhöhe und die senkrechte Ausrichtung.

Nicht zugelassen ist alles, was das Layout verschieben würde. Ränder, Abstände und Maße bleiben außen vor, und der Grund ist derselbe wie oben: eine Änderung des Layouts würde den Umbruch ändern, der Umbruch würde die erste Zeile ändern, und die neue erste Zeile würde erneut das Layout ändern. Die Beschränkung verhindert eine Schleife, die kein Ergebnis hätte.

Anwendbar ist das Pseudoelement auf Blockcontainer. Bei verschachtelten Blöcken bezieht es sich auf die erste formatierte Zeile, also auf die erste Zeile, die tatsächlich gesetzt wird, und nicht auf das äußere Element als solches.

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, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height

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.

Pseudoelement Das Pseudo-Element :first-line