::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. User Avatar
    Permalink to comment#

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

  2. User Avatar
    Permalink to comment#

    very good
    this sait have good design and css

  3. User Avatar
    Permalink to comment#

    Not working with anchors


    • User Avatar
      Permalink to comment#

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

    • User Avatar
      Permalink to comment#


  4. User Avatar
    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

  5. User Avatar
    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?

  6. User Avatar

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

  7. User Avatar
    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…

  8. User Avatar
    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)

  9. User Avatar
    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.

  10. User Avatar
    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.

    • User Avatar

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

  11. User Avatar
    Permalink to comment#

    Firefox ignores $ and does odd things with other special/punctuation characters. That along with the specific case for it to take effect makes the selector feel undependable, which is unfortunate since it could be really be handy.

  12. User Avatar
    Permalink to comment#

    I ‘m experiencing a rather strange thing with the ::first-letter pseudo element in combination with Firefox. I assigned the ::first-letter to a div tag and applied some properties to the pseudo element but nothing happens. In alle the other browsers such as safari, chrome,edge it works, but not in Firefox. If I put the ::first-letter with its properties to a p tag Firefox does render it.
    Strangely the iOS version of firefox does render the properties.
    Anybody an idea?

    • User Avatar
      Tom Duhamel
      Permalink to comment#

      div::first-letter works perfectly fine for me in Firefox 50.0.2.

      Also, you should know that Firefox on iOS uses Webkit, not Geeko, as its engine (because of a rule by Apple which disallows the use of an engine other than the default included one!)

  13. User Avatar
    Andrea Mattioli
    Permalink to comment#

    Doesn’t work also if the parent has display:flex

  14. User Avatar
    Permalink to comment#

    i have one tag

    this is start

    how i can apply css only on last word “start”
    means that i want to apply css in one tag each word different
    any help ?

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.