Comments on: ::first-letter

By: Mayur Bharodiya

Mayur Bharodiya — Thu, 18 Jun 2020 05:49:26 +0000

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.

By: farooq

farooq — Sat, 11 Nov 2017 04:13:12 +0000

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 ?

By: Andrea Mattioli

Andrea Mattioli — Thu, 31 Aug 2017 22:06:00 +0000

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

By: Tom Duhamel

Tom Duhamel — Fri, 10 Feb 2017 06:01:04 +0000

In reply to Eric. 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!)

By: Eric

Eric — Thu, 19 Jan 2017 11:26:24 +0000

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?

By: James

James — Fri, 09 Dec 2016 17:13:35 +0000

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.

By: Preston

Preston — Fri, 06 May 2016 14:20:11 +0000

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

By: Frank

Frank — Wed, 27 Apr 2016 14:28:42 +0000

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.

By: Jolacus

Jolacus — Mon, 30 Nov 2015 00:58:35 +0000

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.

By: aTei

aTei — Mon, 29 Jun 2015 09:57:10 +0000

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

By: Stephany Dimitrova

Stephany Dimitrova — Wed, 07 Jan 2015 18:49:04 +0000

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…

By: chaitanya

chaitanya — Thu, 08 May 2014 12:37:14 +0000

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

By: neel

neel — Wed, 16 Apr 2014 09:28:38 +0000

In reply to Murtaza.

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

By: jackdenied

jackdenied — Thu, 06 Feb 2014 09:55:10 +0000

Looks to be a known bug – http://stackoverflow.com/questions/19649540/css-first-letter-selection-highlighting

By: jackdenied

jackdenied — Thu, 06 Feb 2014 09:47:16 +0000

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?