W3docs
de
Anmelden

CSS ::first-line Pseudo-Element

Das ::first-line CSS-Pseudo-Element wählt die erste Zeile eines Block-Containers aus und gestaltet sie. Mit Beispielen erklärt.

Das ::first-line Pseudo-Element wendet Stile auf die erste Zeile eines Block-Level-Containers an. Es wählt keine Inline-Level-Elemente aus, wie z. B. Bilder oder Inline-Tabellen.

Es wird am häufigsten für typografische Gestaltungselemente verwendet, wie sie Zeitungen und Magazine auf die erste Zeile eines Artikels anwenden — eine andere Farbe, Kapitälchen oder zusätzlicher Buchstabenabstand — ohne diese Zeile in zusätzliches Markup einzuwickeln. Da die „erste Zeile" von der Breite des Elements, der Schriftgröße und dem viewport des Nutzers abhängt, wird der zu gestaltende Teil vom Browser bei jeder Layoutänderung neu berechnet.

Nur ein bestimmter Satz von CSS-Eigenschaften kann auf ::first-line angewendet werden. Die vollständige Liste ist im Abschnitt Erlaubte Eigenschaften unten aufgeführt.

Das ::first-letter Pseudo-Element erbt nur die Eigenschaften, die auf ::first-line anwendbar sind. Für alle anderen Eigenschaften erbt es vom Elternelement. Wenn beide Pseudo-Elemente verwendet werden, überschreiben die auf ::first-letter definierten Stile diejenigen, die von ::first-line geerbt wurden.

Das ::first-line Pseudo-Element kann auch mit einem einzelnen Doppelpunkt (:first-line) geschrieben werden, was von allen Browsern unterstützt wird.

Version

CSS Pseudo-Elements Level 4

Selectors Level 3

CSS Level 2

CSS Level 1

Erlaubte Eigenschaften

Das ::first-line Pseudo-Element akzeptiert nur bestimmte CSS-Eigenschaften. Hier sind sie:

Spezifität und Vererbung des ::first-line Pseudo-Elements

Text in der ersten Zeile erbt nur die Eigenschaften, die auf das ::first-line Pseudo-Element anwendbar sind. Für alle anderen Eigenschaften erbt er vom Elternelement. Zum Beispiel erbt das ::first-letter Pseudo-Element die Stile, die durch das ::first-line Pseudo-Element angewendet werden.

Das ::first-line Pseudo-Element hat eine höhere Spezifität als der Basis-Elementselektor, sodass seine Stile normale Deklarationen am Element überschreiben. Jedoch gelten die standardmäßigen CSS !important-Regeln weiterhin gemäß den normalen Kaskaden-Regeln.

Syntax

CSS ::first-line Syntaxbeispiel

::first-line {
  css declarations;
}

Beispiel des ::first-line Pseudo-Elements:

CSS ::first-line Codebeispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p::first-line {
        color: #85d6de;
        text-transform: uppercase;
      }
    </style>
  </head>
  <body>
    <h2>::first-line selector example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </body>
</html>
Probier es selbst »

In diesem Beispiel werden nur die Wörter, die in die erste gerenderte Zeile des Absatzes fallen, hellblau und in Großbuchstaben dargestellt. Ändern Sie die Fenstergröße, und der gestaltete Bereich ändert sich automatisch, da ::first-line der Zeile folgt, die der Browser tatsächlich darstellt, und nicht einer festen Anzahl von Zeichen.

Ergebnis

CSS ::first-line Eigenschaft

Wichtige Hinweise

  • Nur Block-Level-Container reagieren. Das Anwenden von ::first-line auf ein Inline-Element (wie ein <span> oder ein <a>, das nicht auf display: block gesetzt wurde) hat keine Wirkung.
  • Die Zeile ist dynamisch. Es gibt keine Möglichkeit, eine feste Anzahl von Zeichen anzusprechen — wenn sich viewport, Schriftart oder Abstände ändern, berechnet der Browser neu, welcher Text zur ersten Zeile gehört, und gestaltet ihn entsprechend um.
  • Die Eigenschaftsunterstützung ist eingeschränkt. Layout-beeinflussende Eigenschaften (wie margin, padding, border oder width) werden bei ::first-line ignoriert. Verwenden Sie nur die im Abschnitt Erlaubte Eigenschaften aufgeführten Eigenschaften.
  • Die Reihenfolge ist wichtig bei ::first-letter. Wenn Sie beide gestalten, deklarieren Sie sie so, dass der beabsichtigte Gewinner klar ist: ::first-letter-Stile überschreiben die passenden Eigenschaften, die von ::first-line geerbt wurden. Für Drop-Cap-Gestaltung, siehe das ::first-letter Pseudo-Element.

Übung

Übung
Worauf kann der ::first-line Pseudo-Element-Selektor in CSS angewendet werden?
Worauf kann der ::first-line Pseudo-Element-Selektor in CSS angewendet werden?
Was this page helpful?