::first-letter is a pseudo element which allows you to style the first letter in an element, without needing to stick a <span> tag 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;
 The first letter is bold and red

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

 he first letter is bold and red

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.

Browser Support

Chrome Safari Firefox Opera IE Android iOS
1+ 1+ 1+ 3.5+ 5.5 All All


  1. omid
    Permalink to comment#

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

  2. Edson
    Permalink to comment#

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

  3. mahdi
    Permalink to comment#

    very good
    this sait have good design and css

  4. Murtaza
    Permalink to comment#

    Not working with anchors


    • 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#


  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

  9. Stephany Dimitrova
    Permalink to comment#

    Perfect for making a book like blog posts. You know in the books where each chapter will start with a first letter that is kickass big and bold or big with a different color…

  10. aTei
    Permalink to comment#

    Be careful with * character.
    In these examples not only first letter would be taken:
    *abc – highlights *a
    **abc**a(in all examples, amount of * don’t matter it would highlight all)

  11. Jolacus
    Permalink to comment#

    Ok, can anyone explain what the spec-writers were thinking when only applying this to block elements? I’m willing to accept there might be a good reason, but right now I’m seeing red.

  12. Frank
    Permalink to comment#

    Hi, thank you for this CSS-Tricks.
    Please help, is it possible with CSS to 4. letter in a word to give a different color?
    Not etc. – only with CSS please.
    Sample: boxCode << the ‘C’ must color red.

    • Preston

      @Frank, I don’t think it’s possible with CSS alone, but here is something with JS that would accomplish that.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.