::first-line

Das Pseudoelement ::first-line dient dazu, Stile auf die erste Zeile eines Elements anzuwenden. Stellen Sie sich einen Absatz vor, der mehrere Zeilen lang ist (wie dieser!). ::first-line ermöglicht es Ihnen, diese erste Textzeile zu gestalten. Sie könnten sie größer machen oder sie als stilistische Wahl in Kapitälchen setzen. Die Menge des Textes, auf den dieses Pseudoelement abzielt, hängt von mehreren Faktoren ab, wie z. B. Zeilenlänge, Viewport-Breite, Schriftgröße, Buchstabenabstand, Wortabstand. Sobald die Zeile umbricht, wird der Text danach nicht mehr ausgewählt. Beachten Sie, dass hier kein tatsächliches DOM-Element ausgewählt wird (daher „Pseudo“-Element).

Dieses Pseudoelement funktioniert nur bei Block-Level-Elementen (wenn display entweder auf block, inline-block, table-caption, table-cell gesetzt ist). Wenn es auf ein Inline-Element gesetzt wird, passiert nichts, auch wenn dieses Inline-Element einen Zeilenumbruch innerhalb hat.

Beachten Sie auch, dass nicht alle Eigenschaften in einem Regelwerk, das ::first-line enthält, verwendet werden können. Meistens

.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 möchten

UA dürfen auch andere Eigenschaften anwenden.

Ein Wort zur Spezifität

Die folgende Demo zeigt, wie ::first-line jede Art von Spezifität überschreiben kann, sogar !important.

• Der 1. Absatz wird durch einen Tag-Selektor grau gefärbt
• Der 2. Absatz wird durch einen Klassen-Selektor grau gefärbt
• Der 3. Absatz wird durch einen ID-Selektor grau gefärbt
• Der 4. Absatz wird durch einen !important Bash gefärbt

Das liegt daran, dass das Pseudoelement wie ein Kindelement behandelt wird und nicht nur als Teil des Elternelements. Die Regeln, die Sie darauf anwenden, gelten nur für dieses, und die Elternregeln können nur darauf kaskadieren.

Versuchen Sie auch, Ihr Browserfenster zu vergrößern und zu verkleinern, um zu sehen, wie sich das Pseudoelement verhält, wenn sich die Viewport-Breite ändert.

Es gibt kein :last-line oder :nth-line, obwohl das cool wäre.

Browser-Unterstützung

Weitere Informationen

• CSS Pseudo-Elements Module Level 4
• MDN-Dokumentation

Verwandt