CSS ::first-letter Selector

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.