The ::first-letter and ::first-line pseudo-elements.
Summary of characteristics of the ::first-letter selector
Description of the ::first-letter and ::first-line pseudo-elements.
The pseudo-element ::first-letter targets the first letter of an element.
The pseudo-element ::first-line targets the first line of text of the element.
The latter is dynamic, i.e. it is constantly re-evaluated for example if the width of the
Browser window changes or if the font size is changed.
Not all properties can be applied to these two pseudo-elements. Generally speaking, let's say that
properties that apply to inline elements are accepted, including:
- Style of characters (font, size, bold, other attributes, etc.).
- Color and opacity.
- Background properties.
The two pseudo-elements ::first-letter and ::first-line are only for elements of the block type.
They are not applicable on inline elements such as links (a tags).
Special case of certain characters with the pseudo-element ::first-letter.
If the text of the element begins with a br tag, ::first-letter and ::first-line are empty.
On the other hand, certain characters are not taken into account to determine what is the first letter: parentheses,
punctuation marks, etc.
These characters are formatted in the ::first-letter format, as well as the character that follows them.
But unfortunately not all browsers follow the same rules. The samples below will give you an idea of what your browser does.
- Space. This makes sense since the space at the beginning of a text isn't even displayed by HTML.
Note that the
non-breaking spaceis considered a normal letter. - !Exclamation.
- ?Question mark.
- "Double quotation mark.
- #Dièse.
- $Dollar.
- %Percentage.
- &Commercial (ampersand).
- 'Apostrophe.
- (Opening or closing parenthesis, but the element's contents are unlikely to begin with a closing parenthesis.
- [Opening or closing hook.
- {Opening or closing brace.
- *Asterisk, a sign of multiplication.
- +Plus, sign of addition.
- -Dash, sign of subtraction.
- /Slash, slash, division sign.
- ,Punctuation marks: comma, period, semicolon, colon.
- =Lower, higher, or equal signs.
- _Underscore (or underlined white).
- ^Circumflex.
- |Vertical bar (pipe).
- #####Caractères repeated.
Type one or more characters here
and see how they are considered by the ::first-letter pseudo-element.
?Test
The pseudo-elements ::prefix and ::suffix.
To format differently the punctuation characters that may precede the first letter or that may follow it, the standard provides the
pseudo-elements ::prefix and ::suffix. These are children of ::first-letter: they are used in conjunction
with ::first-letter but are still not widely recognized by browsers (2025).
...::first-letter::prefix {
...
}
Examples.
Combination of selectors, attention to space.
#example1 block, with no intermediate tags.
This text is the content of a p tag included in the #example1 block.
By looking at the CSS code, you'll understand why not all the paragraphs in this #exemple1 block have
all the same formatting.
Note the space between #example1 and ::first-line in the selector of the first rule.
What translates to "the first row of all child elements of #example1" are in red.
This space is not included in the second rule. The latter therefore concerns only the first line of the element
#example1, which must be in blue.
Formatting initials.
The CSS code in this second example, as written, is for the first letter of each of the child elements
of the #example2 block.
As can be seen, each of the paragraphs in this block does indeed have a drop cap.
Usually, when drop caps are used, the line on which the drop cap is located is passed in small caps.
This is what has been done here with the pseudo-element ::first-line.
By changing the width of your browser window, you will be able to see that this selector is indeed dynamic.
Note: the buttons (input tags) are obviously not selected by ::first-letter,
but are not against it with ::first-line.
Browser compatibility.
Both of these selectors are handled well by today's browsers.
::first-letter, which, as its name suggests, targets only the first letter of an element.::first-line, which targets the first line of text of an element.::first-letterpseudo-element
::first-line pseudo-element
Browsers on computers :
Mobile browsers :
Outdated or marginal browsers :
Internet Explorer
KaiOS Browser
Opéra Mobile
Chrome
Edge
Firefox
Opéra
Safari
Safari sur IOS
Androïd Brower
Chrome pour Androïd
Firefox pour Androïd
Samsung Internet
Baidu Browser
QQ Browser
UC Browser pour Androïd
Opéra mini
History of the ::first-letter and ::first-line selectors.
Recall that in the very first versions of CSS, pseudo-elements were, like pseudo-classes, prefixed with a single colon character.
-
Cascading Style Sheets specification - Version 1
Initial definition of the:first-lineand:first-letterpseudo-elements (with a single colon character in this first version).
November 17, 1995Working Draft.
November 12, 1996Proposed for recommendation.
December 17, 1996Recommendation .
September 13, 2018Old specification, declared obsolete. -
Cascading Style Sheets Level 2 - Revision 1 Specification
No change in the definition of the:first-lineand:first-letterpseudo-elements.November 04, 1997Working Draft.March 24, 1998Proposed for recommendation.May 11, 1998Recommendation . -
Selectors Level 3
Since this version, pseudo-elements start with a double colon, to distinguish them from pseudo-classes.August 03, 1999Working Draft.
November 13, 2001Candidate Recommendation.December 15, 2009Proposed for recommendation.September 29, 2011Recommendation . -
CSS Pseudo-Elements Module Level 4
No change to the::fist-letterand::fist-linepseudo-elements.January 15, 2015Working Draft.
List of pseudo-elements.
These terms are defined in the W3C specification CSS Pseudo-Elements Module .
Selectors:
placeholder attribute).