CSS Reference

":first-letter" - css pseudo-element (v. css 1)

  • Will add a style to the first character of a text which MUST be in a block.
  • These are the properties that apply to this pseudo-elements: font properties, 'text-decoration', 'text-transform', 'letter-spacing', 'word-spacing' (when appropriate), 'line-height', 'float', 'vertical-align' (only if 'float' is 'none'), margin properties, padding properties, border properties, color property, background properties.
  • HTML usage: all elements
  • Browsers that support the :first-letter - pseudo-element :
    Internet Explorer Mozilla Firefox Opera Google Chrome Apple Safari

Pseudo-element ":first-letter" example:

<!DOCTYPE HTML >
<html>
  <head>
    <title>Page title</title>
    <style type="text/css">
      i:first-letter, div p:first-letter {
        font-size: 200%;
        color: blue;
        font-variant: small-caps;
      }
    </style>
  </head>
  <body>
    <h2>Header <i style="display: inline-block;">h2</i> text</h2>
    <div>
      <p>The first letter has a new font size and color. <p>
    </div>
    <p><b>Note:</b> For :first-child to work in
      IE, a DOCTYPE must be declared.</p>
  </body>
</html>
© 2010 by Finnesand Data. All rights reserved.
This site aims to provide FREE programming training and technics.
Finnesand Data as site owner gives no warranty for the correctness in the pages or source codes.
The risk of using this web-site pages or any program codes from this website is entirely at the individual user.