Grow your CSS skills. Land your dream job.

::first-letter

Last updated on:

::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

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.
Chrome Safari Firefox Opera IE Android iOS
1+ 1+ 1+ 3.5+ 5.5 All All

Comments

  1. Permalink to comment#

    very good.very best web site for css and desigen.

  2. The first article that I know with just a title! :)

  3. very good
    this sait have good design and css
    tanks

  4. Permalink to comment#

    Not working with anchors

    a::first-child{
    text-transform:uppercase;
    }

    • Carl
      Permalink to comment#

      It only works if the parent is a block-level element. Anchors are inline elements by default.

    • neel
      Permalink to comment#

      a:first-child{
      text-transform:uppercase;
      }

  5. amay
    Permalink to comment#

    why cant i only customize ‘*’ element

    cannot style for * element

    p:first-letter{ color:#BB0000; font-size:12px; font-weight:bolder;}

    * MY

  6. jackdenied
    Permalink to comment#

    Strange, but when I apply this code and run it at least on chrome. When i try to use highlight option, the first letter is not selected. Is it known issue?

  7. chaitanya

    i tried it, but its not working for the latest version of firefox..!! i.e, 28.0 & 29.0!! was totally shocked!!

  8. Abdul "the baby killer"Laden
    Permalink to comment#

    Praise Jesus

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".