CSS ::first-line Pseudo-Element

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

Es können nur bestimmte CSS-Eigenschaften auf ::first-line angewendet werden. Die vollständige Liste finden Sie im Abschnitt Zulässige Eigenschaften weiter unten.

Das Pseudo-Element ::first-letter erbt nur die Eigenschaften, die für ::first-line gelten. Für alle anderen Eigenschaften erbt es vom übergeordneten Element. Wenn beide Pseudo-Elemente verwendet werden, überschreiben die auf ::first-letter definierten Stile die von ::first-line geerbten.

Das Pseudo-Element ::first-line 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

Zulässige Eigenschaften

Das Pseudo-Element ::first-line akzeptiert nur bestimmte CSS-Eigenschaften. Sehen wir uns diese an:

Alle Eigenschaften, die sich auf die Schriftart beziehen: font, font-kerning, font-style, font-variant, font-variant-numeric, font-variant-east-asian, font-variant-caps, font-variant-alternates, font-variant-ligatures, font-feature-settings, font-language-override, font-weight, font-size, font-size-adjust, font-stretch und font-family.
Alle Eigenschaften, die sich auf den Hintergrund beziehen: background-color, background-clip, background-image, background-origin, background-position, background-repeat, background-size, background-attachment und background-blend-mode.
Einige Eigenschaften zur Textgestaltung: text-shadow, text-decoration, text-decoration-color, text-decoration-line und text-decoration-style.
Die CSS-color-Eigenschaft.
word-spacing, line-height, letter-spacing, text-transform und white-space.

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

Text in der ersten Zeile erbt nur die Eigenschaften, die für das Pseudo-Element ::first-line gelten. Für alle anderen Eigenschaften erbt es vom übergeordneten Element. Beispielsweise erbt das Pseudo-Element ::first-letter die Stile, die vom Pseudo-Element ::first-line angewendet werden.

Das Pseudo-Element ::first-line hat eine höhere Spezifität als der Basis-Element-Selektor, daher überschreiben seine Stile normale Deklarationen des Elements. Standard-CSS-!important-Regeln gelten jedoch weiterhin gemäß den normalen Kaskadierungsregeln.

Syntax

CSS ::first-line Syntaxbeispiel

css

::first-line {
  css declarations;
}

Beispiel für das ::first-line Pseudo-Element:

CSS ::first-line Codebeispiel

html

<!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>

Try it Yourself »

Ergebnis

CSS ::first-line-Eigenschaft

Praxis

Auf was kann der ::first-line Pseudo-Element-Selektor in CSS angewendet werden?

Blockartige ElementeInline-ElementeElemente mit ::before- und ::after-Pseudo-ElementenElemente, die auf float gesetzt sind

CSS ::first-line Pseudo-Element ​

Version ​

Zulässige Eigenschaften ​

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

Syntax ​

Beispiel für das ::first-line Pseudo-Element: ​

Ergebnis ​

Praxis ​