The ::first-letter
CSS pseudo-element applies styles to the first letter of the first line of a block-level element, but only when not preceded by other content (such as images or inline tables).
/* Selects the first letter of a <p> */ p::first-letter { font-size: 130%; }
The first letter of an element is not always trivial to identify:
IJ
in Dutch. In these cases, both letters of the digraph should be matched by the ::first-letter
pseudo-element. (This is poorly supported by browsers; see the browser compatibility table below.)::before
pseudo-element and the content
property may inject some text at the beginning of the element. In that case, ::first-letter
will match the first letter of this generated content.CSS3 introduced the ::first-letter
notation (with two colons) to distinguish pseudo-classes from pseudo-elements. Browsers also accept :first-letter
, introduced in CSS2.
Only a small subset of CSS properties can be used with the ::first-letter
pseudo-element:
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
and font-family
background
, background-color
, background-image
, background-clip
, background-origin
, background-position
, background-repeat
, background-size
, background-attachment
, and background-blend-mode
margin
, margin-top
, margin-right
, margin-bottom
, margin-left
padding
, padding-top
, padding-right
, padding-bottom
, padding-left
border
, border-style
, border-color
, border-width
, border-radius
, border-image
, and the longhands propertiescolor
propertytext-decoration
, text-shadow
, text-transform
, letter-spacing
, word-spacing
(when appropriate), line-height
, text-decoration-color
, text-decoration-line
, text-decoration-style
, box-shadow
, float
, vertical-align
(only if float
is none
) CSS properties/* CSS3 syntax */ ::first-letter /* CSS2 syntax */ :first-letter
Make the first letter of every paragraph red and big.
<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> <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 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>
p::first-letter { color: red; font-size: 130%; }
Specification | Status | Comment |
---|---|---|
CSS Pseudo-Elements Level 4 The definition of '::first-letter' in that specification. | Working Draft | Generalizes allowed properties to typesetting, text decoration, inline layout properties, opacity , and box-shadow . |
CSS Text Decoration Module Level 3 The definition of 'text-shadow with ::first-letter' in that specification. | Candidate Recommendation | Allows the use of text-shadow with ::first-letter . |
Selectors Level 3 The definition of '::first-letter' in that specification. | Recommendation | Introduction of the two-colon syntax. Definition of edge-case behavior, such as in list items or with specific languages (e.g., the Dutch digraph IJ ). |
CSS Level 2 (Revision 1) The definition of '::first-letter' in that specification. | Recommendation | No change. |
CSS Level 1 The definition of '::first-letter' in that specification. | Recommendation | Initial definition, using the one-colon syntax. |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 1
|
Yes
|
1
|
9
|
7
|
1
|
Support for the Dutch digraph IJ
|
No | No | No
|
No | No | No |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | ? | ? | Yes
|
4
|
? | ? | ? |
Support for the Dutch digraph IJ
|
? | ? | No | No
|
? | ? | No |
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter