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:
- Punctuation that precedes or immediately follows the first letter is included in the match. Punctuation includes any Unicode character defined in the open (Ps), close (Pe), initial quote (Pi), final quote (Pf), and other punctuation (Po) classes.
- Some languages have digraphs that are always capitalized together, like the
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.) - A combination of the
::before
pseudo-element and thecontent
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.
Allowable properties
Only a small subset of CSS properties can be used with the ::first-letter
pseudo-element:
- All font properties :
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
andfont-family
- All background properties :
background
,background-color
,background-image
,background-clip
,background-origin
,background-position
,background-repeat
,background-size
,background-attachment
, andbackground-blend-mode
- All margin properties:
margin
,margin-top
,margin-right
,margin-bottom
,margin-left
- All padding properties:
padding
,padding-top
,padding-right
,padding-bottom
,padding-left
- All border properties: the shorthands
border
,border-style
,border-color
,border-width
,border-radius
,border-image
, and the longhands properties - The
color
property - The
text-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 iffloat
isnone
) CSS properties
Syntax
/* CSS3 syntax */ ::first-letter /* CSS2 syntax */ :first-letter
Examples
Simple drop cap
In this example we will use the ::first-letter
pseudo-element to create a simple drop cap effect on the first letter of the paragraph coming right after the <h2>
.
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;
}
Result
Effect on special punctuation and non-Latin characters
This example illustrates the effect of ::first-letter
on special punctuation and non-Latin characters.
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%;
}
Result
Specifications
Specification | Status | Comment |
---|---|---|
CSS Pseudo-Elements Level 4The 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 3The definition of 'text-shadow with ::first-letter' in that specification. | Candidate Recommendation | Allows the use of text-shadow with ::first-letter .
|
Selectors Level 3The 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 1The definition of '::first-letter' in that specification. | Recommendation | Initial definition, using the one-colon syntax. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
::first-letter
|
Chrome Full support 1 Full support 1 Full support 1 Alternate Name' Uses the non-standard name: |
Edge Full support 12 Full support 12 Full support 12 Alternate Name' Uses the non-standard name: |
Firefox Full support 1 Full support 1 Full support 1 Alternate Name' Uses the non-standard name: |
IE Full support 9 Full support 9 Full support 5.5 Alternate Name' Uses the non-standard name: |
Opera Full support 7 Full support 7 Full support 3.5 Alternate Name' Uses the non-standard name: |
Safari Full support 1 Full support 1 Full support 1 Alternate Name' Uses the non-standard name: |
WebView Android Full support 37 Full support 37 Full support 37 Alternate Name' Uses the non-standard name: |
Chrome Android Full support 18 Full support 18 Full support 18 Alternate Name' Uses the non-standard name: |
Firefox Android Full support 4 Full support 4 Full support 4 Alternate Name' Uses the non-standard name: |
Opera Android Full support 10.1 Full support 10.1 Full support 10.1 Alternate Name' Uses the non-standard name: |
Safari iOS Full support 1 Full support 1 Full support 1 Alternate Name' Uses the non-standard name: |
Samsung Internet Android Full support 1.0 Full support 1.0 Full support 1.0 Alternate Name' Uses the non-standard name: |
Support for the Dutch digraph IJ
|
Chrome
No support No |
Edge
No support No |
Firefox No support No No support No Notes' See bug 92176. |
IE
No support No |
Opera
No support No |
Safari
No support No |
WebView Android
No support No |
Chrome Android
No support No |
Firefox Android No support No No support No Notes' See bug 92176. |
Opera Android
No support No |
Safari iOS
No support No |
Samsung Internet Android
No support No |
Legend
- Full support
- Full support
- No support
- No support
- See implementation notes.'
- See implementation notes.
- Uses a non-standard name.'
- Uses a non-standard name.
See also
::first-letter (:first-letter) by Mozilla Contributors is licensed under CC-BY-SA 2.5.