CSS ::first-letter selector allows you to style the first letter of a selected element and you can style the first letter just like a normal element.
However, the ::first-letter selector can only be used with the block-level elements. The first letter of inline elements i.e. elements having display: inline; can not be styled using this selector.
The ::first-letter selector in the following example selects the first letter of each paragraph and apply the font-size and the color properties to each one:
Example:
p::first-letter{
font-size: 2em;
color: red;
}
If you add some text before the element using the ::before selector, the ::first-letter selector will select the first letter of the text added using the ::before selector instead of the actual one.
See this example:
Example:
p::before{
content: 'Hello ';
}
p::first-letter{
font-size: 2em;
color: red;
}
If you apply both the ::first-letter as well as the ::first-line selector on an element, the ::first-letter will inherit the styles from the ::first-line.
But, if the two styles conflict, the ::first-letter will overwrite the conflicting styles written under the ::first-line selector.
In the following example, the ::first-letter will inherit the font-style property from the ::first-line. But, it will overwrite the color property. It means the color of the first letter will be red, not blue.
Example:
p::first-line{
font-style: italic;
color: blue;
}
p::first-letter{
font-size: 2em;
color: red;
}
CSS Syntax
The syntax of the ::first-letter selector is as follows:
::first-letter{
CSS Styles;
}
Browser Support
The number in each cell of the table specifies the first version of the browser that fully supports the ::first-letter selector.
| Selector | |||||
| ::first-letter | 1.0 | 9.0 | 1.0 | 1.0 | 7.0 |
