::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 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:
<!-- Just an example, does not work! -->
<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-letterand::first-lineon an element, the first letter will inherit from the first line styles, but styles on the::first-letterwill 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
- When using for drop-caps, use in conjunction with
p:first-of-typeso not every first letter gets styled - Example Pen – with Generated Content
- W3C Wiki
- W3C CSS3 Selectors module
Browser Support
This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 9 | 3.5 | 9 | 12 | 5.1 |
Mobile / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 123 | 124 | 3 | 5.0-5.1 |
Note: For Internet Explorer 8 and down, use a single colon :first-letter instead of the double-colon notation.
very good.very best web site for css and desigen.
very good
this sait have good design and css
tanks
Not working with anchors
a::first-child{
text-transform:uppercase;
}
It only works if the parent is a block-level element. Anchors are inline elements by default.
a:first-child{
text-transform:uppercase;
}
why cant i only customize ‘*’ element
cannot style for * element
p:first-letter{ color:#BB0000; font-size:12px; font-weight:bolder;}
* MY
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?
Looks to be a known bug – http://stackoverflow.com/questions/19649540/css-first-letter-selection-highlighting
i tried it, but its not working for the latest version of firefox..!! i.e, 28.0 & 29.0!! was totally shocked!!
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…
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*bc–a*a**–a***a*bc–*a*.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.
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.
@Frank, I don’t think it’s possible with CSS alone, but here is something with JS that would accomplish that.
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.
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?
div::first-letterworks 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!)
Doesn’t work also if the parent has
display:flexi 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 ?
Why do we need :first-letter whereas we have span tag ?
and in comparison of :first-letter pseudo and span tag, :first-letter has limited property that can be used than span tag.