CSS Selector - Using the ::first-letter Selector








The ::first-letter selector selects the first letter in a block of text.

:first-letter is a Pseudo-element and it generates a pseudo-element that contains the first letter of an element.

:first-letter styles the first letter of an element.

Any leading punctuation should be styled along with the first letter.

Prior to CSS2.1, :first-letter could be attached only to block-level elements.

CSS2.1 expands its scope to include block, list-item, table-call, table caption, and inline-block elements.

There is a limited set of properties that can apply to a first letter.

Examples: 

h1:first-letter  {font-size: 166%;}
p:first-letter {text-decoration:  underline;}

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 (when float is 'none')
  • text-transform
  • line-height
  • float
  • clear




Summary

CSS Version
1

CSS Syntax

CSS3 syntax (double-colon)

::first-letter { 
   style properties 
}

CSS2 syntax (single-colon)

:first-letter { 
   style properties 
}

Browser compatibility

::first-letter Yes 9.0 Yes Yes Yes

IE 5.5-8 only support the single-colon CSS2 syntax (:first-letter).





Example

The following code uses the ::first-letter Pseudo-Element Selector. 

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
::first-letter {<!--  www. jav a2s.c o m-->
  background-color: grey;
  color: white;
  border: thin black solid;
  padding: 4px;
}
</style>
</head>
<body>
  <p>This is a test. This is a test. This is a test. This is a test.
  This is a test. This is a test. This is a test. This is a test. This is a test.
  This is a test. </p>

  <p>
    I like <span lang="en-uk" class="class2">CSS</span>.
  </p>
  <a href="http://w3c.org">Visit the W3C website</a>
</body>
</html>

Click to view the demo

Example 2

The following code uses the first letter and first line Pseudo-element to add style to a paragraph.

<!DOCTYPE HTML>
<html>
    <head>
        <style>
        p::first-letter {<!--from w  w  w.  j  a v  a2s  .  c  om-->
            font-size: 200%;
            background-color: lightgray;
            border: 1px solid black;
        }
        p::first-line {
            letter-spacing: 5px;
        }
        </style>
    </head>
    <body>
            <p>
                This is a test. This is a test. 
                This is a test. This is a test. 
            </p>
    </body>
</html>

Click to view the demo