Make the first character Uppercase in CSS

Question

Is there a way to make the first character Uppercase in a label in CSS.

Here is my HTML:

<a class="m_title" href="">gorr</a>
<a class="m_title" href="">trro</a>
<a class="m_title" href="">krro</a>
<a class="m_title" href="">yrro</a>
<a class="m_title" href="">gwwr</a>

To specify - the first character and ONLY the first one. Which makes the `text-transform: capitalize;` not enough when having multiple words — wiktus239, Jan 09 '17 at 12:43

BoltClock · Accepted Answer · 2019-09-01T18:07:20.607

866

There's a property for that:

a.m_title {
    text-transform: capitalize;
}

If your links can contain multiple words and you only want the first letter of the first word to be uppercase, use :first-letter with a different transform instead (although it doesn't really matter). Note that in order for :first-letter to work your a elements need to be block containers (which can be display: block, display: inline-block, or any of a variety of other combinations of one or more properties):

a.m_title {
    display: block;
}

a.m_title:first-letter {
    text-transform: uppercase;
}

edited Sep 01 '19 at 18:07

answered Apr 07 '11 at 07:20

BoltClock

700,868
160
1,392
1,356

Can this be used with IE8+ ? – alanjds Jan 15 '13 at 05:10
4

@alanjds: Yes, it works in every version of IE that supports CSS. It's very old technology. – BoltClock Jan 15 '13 at 05:11
8

you might want to use a double semi colon, see http://css-tricks.com/almanac/selectors/f/first-letter/ – ndequeker Dec 11 '13 at 12:20
6

@Voles: Sure if you don't need to support IE8 and older. Not saying you couldn't use double colons if you wanted to. (For what it's worth, at the time of this answer which was posted 2 and a half years ago, my personal policy *was* to support IE8 by default. Today I no longer do.) – BoltClock Dec 11 '13 at 12:22
3

Note, if the `display: block` requirement (who knows why that is) makes this difficult, `:first-letter` also works with `display: inline-block`. – Mitya Jul 31 '14 at 11:45
It's really unfortunate that `::first-letter` doesn't work on flex box elements. – GetFree Apr 15 '18 at 03:48
@GetFree: Assuming you mean elements with `display: flex`, that is very true. I understand the reasoning behind it, but it can be irritating (if an option at all) to have to put the text in a child element and style that element's `::first-letter` instead. – BoltClock Apr 15 '18 at 03:53
@BoltClock, please share with us the rationale behind that decision. Understanding why it's that way will help us feel less irritated about it. – GetFree Apr 15 '18 at 16:43
@GetFree: Well, it's not exactly a decision that was made, just a side effect of the flex container/flex item system. Every child of a flex container is a flex item, including text, which is put in an anonymous flex item. So a flex container can't have a `::first-letter` - only its flex items can. Since you can't target anonymous boxes (hence "anonymous"), the workaround is to put the text in a child element that you *can* target. – BoltClock Apr 15 '18 at 16:46
I see. They could've worked around that by defining `::first-letter` to mean the first letter of that first anonymous flex item (if there is one). It seems quite easy to implement. – GetFree Apr 15 '18 at 17:40
@GetFree: The css-pseudo-4 spec seems to [suggest](https://drafts.csswg.org/css-pseudo-4/#application-in-css) that this could happen in a future spec (as if css-pseudo-4 itself wasn't already one!). You'd need enough interest from both web developers and browser vendors, though. – BoltClock Apr 16 '18 at 03:04
why not use a.m_title { text-transform: uppercase; } – Henry Garcia De Guzman Jul 31 '18 at 07:19
1

@Henry Garcia De Guzman: Because that uppercases everything, not just the first letter (of each word or sentence or whatever). – BoltClock Jul 31 '18 at 07:20
Your answer is incorrect: `display: block` is not required, `display: inline-block` can be used instead. Correct your answer. – catamphetamine Apr 09 '19 at 16:02
Worked for me then it is necessary !important; too – c3media Dec 19 '19 at 19:24
@c3media importance will only increase rule specificity isn't it? so thats just your particular case where `!important` is required – godblessstrawberry Jul 07 '21 at 06:28

score 83 · Answer 2 · edited Mar 31 '15 at 19:33

83

Note that the ::first-letter selector does not work with inline elements, so it must be either block or inline-block, as follows:

.m_title {display:inline-block}
.m_title:first-letter {text-transform: uppercase}

edited Mar 31 '15 at 19:33

Dave Jarvis

30,436
41
178
315

answered Feb 23 '15 at 16:02

Logus Graphics

1,793
16
17

3

In my case the whole text was already in capitals, so I had to add text-transform: lowercase to .m_title and now it works perfectly! – hjuster Mar 07 '18 at 18:13

score 60 · Answer 3 · edited Aug 13 '21 at 14:28

60

CSS :first-letter Selector

or:

text-transform: capitalize;

edited Aug 13 '21 at 14:28

Decapitated Soul

283
4
14

answered Apr 07 '11 at 07:19

Amr Elgarhy

66,568
69
184
301

score 55 · Answer 4 · edited Feb 07 '23 at 14:26

55

Make it lowercase first:

.m_title {text-transform: lowercase}

Then make it the first letter uppercase:

.m_title::first-letter {text-transform: uppercase}

"text-transform: capitalize" works for a word; but if you want to use for sentences this solution is perfect.

Example:

.m_title {
  display: inline-block; /* Thanks to Fanky (https://stackoverflow.com/users/2095642/fanky) */
  
  text-transform: lowercase
}

.m_title::first-letter {
  text-transform: uppercase
}

<a class="m_title" href="">gorr</a>
<a class="m_title" href="">trro trro</a>
<a class="m_title" href="">krro</a>
<a class="m_title" href="">yrro</a>
<a class="m_title" href="">gwwr gwwr gwwr</a>

edited Feb 07 '23 at 14:26

Adrian

1,558
1
13
31

answered Apr 07 '19 at 12:11

OzgurG

1,634
1
16
21

2

:first-letter doesn't work with `inline` elements, set to `display:inline-block` if this is your case. (https://stackoverflow.com/questions/7631722/css-first-letter-not-working) – Fanky Apr 09 '19 at 15:32
1

Yoou got the hack! I have a senario of complete Uppercase and this Backed! – jerinisready Nov 26 '21 at 06:28

score 19 · Answer 5 · edited Mar 16 '20 at 13:44

19

I suggest to use

#selector {
    text-transform: capitalize;
}

or

#selector::first-letter {
    text-transform: uppercase;
}

By the way, check this w3schools link: http://www.w3schools.com/cssref/pr_text_text-transform.asp

edited Mar 16 '20 at 13:44

Mosh Feu

28,354
16
88
135

answered Feb 18 '15 at 15:42

Maurizio Battaghini

438
7
13

2

Good answer, but that's most definitely **not** a link to the w3c documentation. – Stephan Oct 03 '17 at 15:19
2

Hey, please note: text-transform 'initial' doesn't mean 'capitalize the first letter'. Rather, it means 'revert to the initial, default value for this property'. – Marcos Buarque Jan 20 '18 at 20:16
Thanks, I have applied both recommended fixes. – Marcos Buarque Mar 26 '18 at 02:37

score 3 · Answer 6 · answered Aug 19 '17 at 13:58

3

<script type="text/javascript">
     $(document).ready(function() {
     var asdf = $('.capsf').text();

    $('.capsf').text(asdf.toLowerCase());
     });
     </script>
<div style="text-transform: capitalize;"  class="capsf">sd GJHGJ GJHgjh gh hghhjk ku</div>

answered Aug 19 '17 at 13:58

Gnana Sekar

31
1

it's work me. concept ..paragraph each word in display first letter caps – Gnana Sekar Aug 19 '17 at 14:00

score -3 · Answer 7 · answered Dec 01 '16 at 16:36

-3

I would recommend that you use the following code in CSS:

    text-transform:uppercase;

Make sure you put it in your class.

answered Dec 01 '16 at 16:36

Kevin Davis

367
1
7
25

score -6 · Answer 8 · answered May 12 '22 at 23:41

-6

Works in React Native too:

    textTransform: 'capitalize'

answered May 12 '22 at 23:41

Señor Ben

1

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community May 13 '22 at 22:19

Make the first character Uppercase in CSS

8 Answers8

Linked

Related