::first-letter

::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;
}
<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.

Browser Support

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

Comments

  1. User Avatar
    omid
    Permalink to comment#

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

  2. User Avatar
    Edson
    Permalink to comment#

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

  3. User Avatar
    mahdi
    Permalink to comment#

    very good
    this sait have good design and css
    tanks

  4. User Avatar
    Murtaza
    Permalink to comment#

    Not working with anchors

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

    • User Avatar
      Carl
      Permalink to comment#

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

    • User Avatar
      neel
      Permalink to comment#

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

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

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

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

    Praise Jesus

  9. 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…

  10. User Avatar
    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)
    a*bca*
    a**a**
    *a*bc*a*.

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

    • User Avatar
      Preston

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

  13. User Avatar
    James
    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.

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.

Submit a Comment

icon-closeicon-emailicon-linkicon-menuicon-searchicon-tag