CSS ::first-letter Pseudo Element

The ::first-letter pseudo-element puts a style on a first letter of the first line in a block-level container. It does not select inline-level elements, such as images or inline-tables.

The ::first-letter pseudo-element does not identify punctuation marks that precede or immediately follows the first letter. It also applies if the first letter is, in fact, a number.

Some CSS properties can be used to style the ::first-letter, they are:

CSS3 specification introduced the ::first-letter to distinguish pseudo-classes from pseudo-elements.

The two-colon syntax in CSS3 is not supported in Internet Explorer 8 and earlier, the one colon syntax is supported in those versions down to version 5.5.

Version

CSS1

Syntax

::first-letter {
  css declarations;
}

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p::first-letter {
      font-size: 35px;
      color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>::first-letter selector example</h2>
    <p>Lorem ipsum is simply dummy text...</p>
  </body>
</html>

The ::first-letter pseudo-element accepts punctuation marks and digits as a first letter:

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p::first-letter {
      font-size: 35px;
      color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>::first-letter selector example</h2>
    <p>-Lorem ipsum is simply dummy text...</p>
    <p>1Lorem ipsum is simply dummy text...</p>
  </body>
</html>

Browser support

9.0+ 9.0+ 12.0+ 3.5+ 5.1+ 12.1+

Practice Your Knowledge

The following CSS properties can be used to style the ::first-letter




Related articles