Grow your CSS skills. Land your dream job.


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


  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

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

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

<div>Example code</div>

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

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