CSS ::first-letter Pseudo-Element

Das ::first-letter Pseudo-Element wendet Stile auf den ersten Buchstaben der ersten Zeile in einem blockartigen Container an. Es wählt keine inline-Level-Elemente aus, wie Bilder oder Inline-Tabellen.

Das ::first-letter Pseudo-Element matcht keine Satzzeichen, die dem ersten Buchstaben vorangehen oder direkt folgen. Es gilt nur für alphabetische Zeichen, nicht für Zahlen oder Symbole.

INFO

Die CSS3-Spezifikation führte ::first-letter ein, um Pseudo-Klassen von Pseudo-Elementen zu unterscheiden.

Zulässige Eigenschaften

Hier sind die CSS-Eigenschaften, die mit dem ::first-letter Pseudo-Element verwendet werden können:

Schriftarten-Eigenschaften: font, font-style, font-feature-settings, font-kerning, font-language-override, font-stretch, font-variant, font-variant-alternates, font-variant-caps, font-variant-east-asian, font-variant-ligatures, font-variant-numeric, font-weight, font-size, font-size-adjust, line-height und font-family.

Hintergrund-Eigenschaften: background, background-origin, background-position, background-repeat, background-size, background-attachment, background-blend-mode, background-color, background-image und background-clip.

Außenabstand-Eigenschaften: margin, margin-top, margin-right, margin-bottom, margin-left.

Innenabstand-Eigenschaften: padding, padding-top, padding-right, padding-bottom, padding-left.

Rahmen-Eigenschaften: Shorthand-Eigenschaften, border-style, border-color, border-width, border-radius, border-image, Longhand-Eigenschaften.

Die color-Eigenschaft.

Die text-decoration, text-shadow, text-transform, letter-spacing, word-spacing (wenn angemessen), text-decoration-color, text-decoration-line, text-decoration-style, box-shadow, float, vertical-align (nur float: none;).

Version

Selectors Level 3

CSS Level 2 (Revision 1)

CSS Level 1

Syntax

CSS ::first-letter Syntaxbeispiel

css

::first-letter {
  css declarations;
}

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

CSS ::first-letter Codebeispiel

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p::first-letter {
        font-size: 35px;
        color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>::first-letter selector example</h2>
    <p>Lorem ipsum is simply dummy text...</p>
  </body>
</html>

Try it Yourself »

Ergebnis

::first-letter example

Beispiel für das ::first-letter Pseudo-Element mit Satzzeichen und einer Ziffer:

::first-letter Codebeispiel

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p::first-letter {
        font-size: 35px;
        color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>::first-letter selector example</h2>
    <p>-Lorem ipsum is simply dummy text...</p>
    <p>1Lorem ipsum is simply dummy text...</p>
  </body>
</html>

Try it Yourself »

Praxis

Wie funktioniert der CSS ::first-letter Pseudo-Element-Selektor?

Er wählt und formatiert den ersten Buchstaben jedes Absatzes aus.Er wählt und formatiert den letzten Buchstaben jedes Absatzes aus.Er kann mit blockartigen Elementen und Tabellenzellen verwendet werden.Er kann verwendet werden, um den ersten Buchstaben jedes Wortes in einem Absatz auszuwählen und zu formatieren.

CSS ::first-letter Pseudo-Element ​

Zulässige Eigenschaften ​

Version ​

Syntax ​

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

Ergebnis ​

Beispiel für das ::first-letter Pseudo-Element mit Satzzeichen und einer Ziffer: ​

Praxis ​