::first-letter
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
* Some parts of this feature may have varying levels of support.
Das ::first-letter
CSS-Pseudoelement wendet Stile auf den ersten Buchstaben der ersten Zeile eines Blockcontainers an, jedoch nur, wenn diesem kein anderer Inhalt vorausgeht (wie z. B. Bilder oder Inline-Tabellen).
Probieren Sie es aus
Die Identifizierung des ersten Buchstabens eines Elements ist nicht immer trivial:
- Satzzeichen, die dem ersten Buchstaben vorangehen oder diesem direkt folgen, werden in die Übereinstimmung einbezogen. Satzzeichen umfassen alle Unicode-Zeichen, die unter die Klassen open (Ps), close (Pe), initial quote (Pi), final quote (Pf) und other punctuation (Po) fallen.
- Einige Sprachen haben Digraphen, die immer zusammen großgeschrieben werden, wie das
IJ
im Niederländischen. In diesen Fällen sollten beide Buchstaben des Digraphen durch das::first-letter
-Pseudoelement abgedeckt sein. - Eine Kombination aus dem
::before
-Pseudoelement und dercontent
-Eigenschaft kann Text am Anfang des Elements einfügen. In diesem Fall wird::first-letter
den ersten Buchstaben dieses generierten Inhalts erfassen.
Hinweis:
CSS führte die ::first-letter
-Schreibweise (mit zwei Doppelpunkten) ein, um Pseudoklassen von Pseudoelementen zu unterscheiden. Zur Abwärtskompatibilität unterstützen Browser auch :first-letter
, das früher eingeführt wurde.
Die Browser-Unterstützung für Digraphen wie IJ
im Niederländischen ist schlecht. Prüfen Sie die Kompatibilitätstabelle unten, um den aktuellen Stand der Unterstützung zu sehen.
Erlaubte Eigenschaften
Nur eine kleine Untermenge von CSS-Eigenschaften kann mit dem ::first-letter
-Pseudoelement verwendet werden:
- Alle Schrift-Eigenschaften:
font
,font-style
,font-feature-settings
,font-kerning
,font-language-override
,font-stretch
,font-synthesis
,font-variant
,font-variant-alternates
,font-variant-caps
,font-variant-east-asian
,font-variant-ligatures
,font-variant-numeric
,font-variant-position
,font-weight
,font-size
,font-size-adjust
,line-height
undfont-family
- Alle Hintergrund-Eigenschaften:
background
,background-color
,background-image
,background-clip
,background-origin
,background-position
,background-repeat
,background-size
,background-attachment
, undbackground-blend-mode
- Alle Rand-Eigenschaften:
margin
,margin-top
,margin-right
,margin-bottom
,margin-left
- Alle Abstands-Eigenschaften:
padding
,padding-top
,padding-right
,padding-bottom
,padding-left
- Alle Rahmen-Eigenschaften: die Kurzschreibweisen
border
,border-style
,border-color
,border-width
,border-radius
,border-image
, und die Langschreibweisen - Die
color
-Eigenschaft - Die Eigenschaften
text-decoration
,text-shadow
,text-transform
,letter-spacing
,word-spacing
(falls zutreffend),line-height
,text-decoration-color
,text-decoration-line
,text-decoration-style
,box-shadow
,float
,vertical-align
(nur wennfloat
aufnone
gesetzt ist)
Syntax
::first-letter {
/* ... */
}
Beispiele
Basisbeispiel mit Initiale
In diesem Beispiel verwenden wir das ::first-letter
-Pseudoelement, um einen Initialeffekt für den ersten Buchstaben des Absatzes direkt nach dem <h2>
zu erstellen.
HTML
<h2>My heading</h2>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
kasd gubergren, no sea takimata sanctus est.
</p>
<p>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
consequat.
</p>
CSS
p {
width: 500px;
line-height: 1.5;
}
h2 + p::first-letter {
color: white;
background-color: black;
border-radius: 2px;
box-shadow: 3px 3px 0 red;
font-size: 250%;
padding: 6px 3px;
margin-right: 6px;
float: left;
}
Ergebnis
Effekt auf spezielle Satzzeichen und nicht-lateinische Zeichen
Dieses Beispiel zeigt die Wirkung von ::first-letter
auf spezielle Satzzeichen und nicht-lateinische Zeichen.
HTML
<p>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
consequat.
</p>
<p>-The beginning of a special punctuation mark.</p>
<p>_The beginning of a special punctuation mark.</p>
<p>"The beginning of a special punctuation mark.</p>
<p>'The beginning of a special punctuation mark.</p>
<p>*The beginning of a special punctuation mark.</p>
<p>#The beginning of a special punctuation mark.</p>
<p>「特殊的汉字标点符号开头。</p>
<p>《特殊的汉字标点符号开头。</p>
<p>"特殊的汉字标点符号开头。</p>
CSS
p::first-letter {
color: red;
font-size: 150%;
}
Ergebnis
Erste Buchstaben in einem SVG-Text-Element stylen
In diesem Beispiel stylen wir mit dem ::first-letter
-Pseudoelement den ersten Buchstaben eines SVG-<text>
-Elements.
Hinweis: Zum Zeitpunkt der Erstellung hat diese Funktion eingeschränkte Unterstützung.
HTML
<svg viewBox="0 0 300 40">
<text y="30">First letter in <text> SVG</text>
</svg>
CSS
text {
font-family: sans-serif;
}
text::first-letter {
font-family: serif;
font-size: 2rem;
font-weight: 600;
fill: tomato;
stroke: indigo;
}
Ergebnis
Spezifikationen
Specification |
---|
CSS Pseudo-Elements Module Level 4 # first-letter-pseudo |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
::first-letter | ||||||||||||
Support for the Dutch digraph IJ | ||||||||||||
Support on SVG <text> element |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- Uses a non-standard name.
- Has more compatibility info.