Comments on: ::first-letter https://css-tricks.com Tips, Tricks, and Techniques on using Cascading Style Sheets. Thu, 18 Jun 2020 14:53:39 +0000 hourly 1 https://wordpress.org/?v=6.5.5 By: Mayur Bharodiya https://css-tricks.com/almanac/selectors/f/first-letter/#comment-1757840 Thu, 18 Jun 2020 05:49:26 +0000 http://css-tricks.com/?page_id=14192#comment-1757840 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 https://css-tricks.com/almanac/selectors/f/first-letter/#comment-1612984 Sat, 11 Nov 2017 04:13:12 +0000 http://css-tricks.com/?page_id=14192#comment-1612984 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 https://css-tricks.com/almanac/selectors/f/first-letter/#comment-1611531 Thu, 31 Aug 2017 22:06:00 +0000 http://css-tricks.com/?page_id=14192#comment-1611531 Doesn’t work also if the parent has display:flex

]]>
By: Tom Duhamel https://css-tricks.com/almanac/selectors/f/first-letter/#comment-1606653 Fri, 10 Feb 2017 06:01:04 +0000 http://css-tricks.com/?page_id=14192#comment-1606653 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 https://css-tricks.com/almanac/selectors/f/first-letter/#comment-1606196 Thu, 19 Jan 2017 11:26:24 +0000 http://css-tricks.com/?page_id=14192#comment-1606196 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 https://css-tricks.com/almanac/selectors/f/first-letter/#comment-1605502 Fri, 09 Dec 2016 17:13:35 +0000 http://css-tricks.com/?page_id=14192#comment-1605502 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 https://css-tricks.com/almanac/selectors/f/first-letter/#comment-1601397 Fri, 06 May 2016 14:20:11 +0000 http://css-tricks.com/?page_id=14192#comment-1601397 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 https://css-tricks.com/almanac/selectors/f/first-letter/#comment-1601195 Wed, 27 Apr 2016 14:28:42 +0000 http://css-tricks.com/?page_id=14192#comment-1601195 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 https://css-tricks.com/almanac/selectors/f/first-letter/#comment-1598336 Mon, 30 Nov 2015 00:58:35 +0000 http://css-tricks.com/?page_id=14192#comment-1598336 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 https://css-tricks.com/almanac/selectors/f/first-letter/#comment-1595519 Mon, 29 Jun 2015 09:57:10 +0000 http://css-tricks.com/?page_id=14192#comment-1595519 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*.

]]>
By: Stephany Dimitrova https://css-tricks.com/almanac/selectors/f/first-letter/#comment-1588673 Wed, 07 Jan 2015 18:49:04 +0000 http://css-tricks.com/?page_id=14192#comment-1588673 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 https://css-tricks.com/almanac/selectors/f/first-letter/#comment-1580931 Thu, 08 May 2014 12:37:14 +0000 http://css-tricks.com/?page_id=14192#comment-1580931 i tried it, but its not working for the latest version of firefox..!! i.e, 28.0 & 29.0!! was totally shocked!!

]]>
By: neel https://css-tricks.com/almanac/selectors/f/first-letter/#comment-1579918 Wed, 16 Apr 2014 09:28:38 +0000 http://css-tricks.com/?page_id=14192#comment-1579918 In reply to Murtaza.

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

]]>
By: jackdenied https://css-tricks.com/almanac/selectors/f/first-letter/#comment-1137603 Thu, 06 Feb 2014 09:55:10 +0000 http://css-tricks.com/?page_id=14192#comment-1137603 Looks to be a known bug – http://stackoverflow.com/questions/19649540/css-first-letter-selection-highlighting

]]>
By: jackdenied https://css-tricks.com/almanac/selectors/f/first-letter/#comment-1137585 Thu, 06 Feb 2014 09:47:16 +0000 http://css-tricks.com/?page_id=14192#comment-1137585 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?

]]>