::first-letter

Last updated on: February 26, 2013

::first-letter is a pseudo element which allows you to style the first letter in an element, without needing to stick a <span> around that first letter in your HTML. While no tags are added to the DOM, it is as if the targeted first letter were encompassed in a <firstletter> tag. You can style that first letter as you would a real element with:

p::first-letter {
  font-weight: bold;
  color: red;
}

<p>
 The first letter is bold and red
</p>

The result is as if you had a faux element around the first letter:

<p>
 <firstletter>T</firstletter>
 he first letter is bold and red
</p>

The first letter is bold and red

• The pseudo element only works if the parent element is a block container box (in other words, it doesn't work on the first letter of display: inline; elements.)
• If you have both a ::first-letter and ::first-line on an element, the first letter will inherit from the first line styles, but styles on the ::first-letter will overwrite when styles conflict.
• If you generate content with ::before, the first letter or punctuation character, whether it's part of the original text node or created with generated content, will be the target.

More Information

• When using for drop-caps, use in conjunction with p:first-of-type so not every first letter gets styled
• Codepen - with Generated Content
• W3C Wiki
• W3C CSS3 Selectors module

Browser Support

Things to note:

• For Internet Explorer 8 and down, you need to use a single colon :first-letter instead of the double-colon notation.