Das ::first-linePseudoelement dient zum Anwenden von Stilen auf die erste Zeile eines Elements. Stellen Sie sich einen mehrzeiligen Absatz vor (wie diesen!). ::first-lineMit dieser Option können Sie diese erste Textzeile formatieren. Sie können es verwenden, um es zu vergrößern, oder es als Stilwahl in Small Caps setzen. Die Textmenge, auf die dieses Pseudoelement abzielt, hängt von verschiedenen Faktoren wie Zeilenlänge, Breite des Ansichtsfensters, Schriftgröße, Buchstabenabstand und Wortabstand ab. Sobald die Zeile unterbrochen wird, wird der darauf folgende Text nicht mehr ausgewählt. Beachten Sie, dass hier kein tatsächliches DOM-Element ausgewählt ist (also „Pseudo“ -Element).
Dieses pseudo-Element arbeitet nur an Blockelementen (wenn displayentweder festgelegt ist block, inline-block, table-caption, table-cell). Wenn es für ein Inline-Element festgelegt ist, geschieht nichts, selbst wenn dieses Inline-Element einen Zeilenumbruch enthält.
Beachten Sie auch, dass nicht alle Eigenschaften in einem Regelsatz verwendet werden können, der Folgendes enthält ::first-line. Meist:
.element::first-line ( font-style:… font-variant:… font-weight:… font-size:… font-family:… line-height:… color:… word-spacing:… letter-spacing:… text-decoration:… text-transform:… background-color:… background-image:… background-position:… background-repeat:… background-size:… background-attachment:… )Die offizielle CSS-Spezifikation besagt, dass Benutzeragenten andere Eigenschaften zulassen können, wenn sie dies wünschen:
UAs können auch andere Eigenschaften anwenden.
Ein Wort zur Spezifität
Die folgende Demo zeigt, wie ::first-linejede Art von Spezifität außer Kraft gesetzt werden kann !important.
- Der 1. Parapgraph wird über einen Tag-Selektor auf Grau gesetzt
- Der 2. Parapgraph wird über eine Klassenauswahl auf Grau gesetzt
- Der 3. Parapgraph wird über einen ID-Selektor auf Grau gesetzt
- Der 4. Parapgraph wird durch eine wichtige Bash grau gesetzt
Dies liegt daran, dass das Pseudoelement wie ein untergeordnetes Element behandelt wird und nicht nur ein Teil des übergeordneten Elements. Die Regeln, die Sie darauf anwenden, sind nur für sie bestimmt. Die übergeordneten Regeln können sich nur darauf auswirken.
Versuchen Sie auch, die Größe Ihres Browsers zu ändern, um zu sehen, wie sich das Pseudoelement verhält, wenn sich die Breite des Ansichtsfensters ändert.
Es gibt keine: letzte Zeile oder: n-te Zeile, obwohl das cool wäre.
Browser-Unterstützung
| Chrom | Safari | Feuerfuchs | Oper | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Ja | Ja | Ja | 3,5+ (alt) 9+ | 5,5+ (alt) 9+ | Ja | Ja |
Da ::first-linees sich um ein Pseudoelement handelt, sollten zwei Doppelpunkte vorangestellt werden, wie in CSS2.1 angegeben. Einige Browser unterstützen jedoch nur die Single-Colon-Syntax (Internet Explorer 5.5 - 9 und Opera 3.5 - 9).