CSS :first-letter pseudo-element

Complete CSS Reference Complete CSS Reference

Example

How to style the first letter of all <p> elements:

p:first-letter
{
background-color:yellow;
}

Try it yourself »

Definition and Usage

The :first-letter pseudo-element adds a style to the first letter of the specified selector.

Note: The following properties apply to the :first-letter pseudo-element: 

  • 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

Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

The :first-letter selector is supported in all major browsers.

CSS Version

The :first-letter selector was first introduced in:

CSS 1

Related Pages

CSS tutorial: CSS Pseudo elements

Examples

Try it Yourself - Examples

Pseudo-elements can also be combined with other CSS selectors and/or properties: 

Example

How to style the first letter of the <p> element with id="hometown":

p#hometown:first-letter
{
background-color:yellow;
}

Try it yourself »

Example

The :first-letter is often used in newspapercolumns to make a BIG first letter:

p:first-letter
{
font-size:40px;
float:left;
}

Try it yourself »

Complete CSS Reference Complete CSS Reference