CSS ::first-letter Selector


Example

Select and style the first letter of every <p> element:

p::first-letter {
    font-size: 200%;
    color: #8A2BE2;
}

Try it yourself »

Definition and Usage

The ::first-letter selector is used to add a style to the first letter of the specified selector.

Note: The following properties can be used with ::first-letter: 

  • font properties
  • color properties 
  • background properties
  • margin properties
  • padding properties
  • border properties
  • text-decoration
  • vertical-align (only if float is 'none')
  • text-transform
  • line-height
  • float
  • clear

Note: The ::first-letter selector can only be used with block-level elements.

Version: CSS1


Browser Support

The numbers in the table specifies the first browser version that fully supports the selector.

Selector
::first-letter 1.0 9.0
Partial from 5.5
1.0 1.0 7.0
Partial from 3.5

Note: IE 5.5-8 and Opera 4-6 only support the old, single-colon CSS2 syntax (:first-letter). Newer versions support the standard, double-colon CSS3 syntax (::first-letter).


CSS Syntax

::first-letter {
    css declarations;
} Demo


Related Pages

CSS tutorial: CSS Pseudo elements



Color Picker

colorpicker