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>

Solution 1

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;
}

Solution 2

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}

Solution 3

CSS :first-letter Selector

or:

text-transform: capitalize;

Solution 4

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</a>
<a class="m_title" href="">krro</a>
<a class="m_title" href="">yrro</a>
<a class="m_title" href="">gwwr</a>

Solution 5

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

View more solutions

Comments

[wiktus239]

To specify - the first character and ONLY the first one. Which makes the text-transform: capitalize; not enough when having multiple words

[alanjds]

Can this be used with IE8+ ?

[BoltClock]

@alanjds: Yes, it works in every version of IE that supports CSS. It's very old technology.

[ndequeker]

you might want to use a double semi colon, see css-tricks.com/almanac/selectors/f/first-letter

[BoltClock]

@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.)

[Mitya]

Note, if the display: block requirement (who knows why that is) makes this difficult, :first-letter also works with display: inline-block.

[Gnana Sekar]

it's work me. concept ..paragraph each word in display first letter caps

[Stephan]

Good answer, but that's most definitely not a link to the w3c documentation.

[Marcos Buarque]

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

[hjuster]

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!

[Marcos Buarque]

Thanks, I have applied both recommended fixes.

[Berkyjay]

It's really unfortunate that ::first-letter doesn't work on flex box elements.

[BoltClock]

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

[Berkyjay]

@BoltClock, please share with us the rationale behind that decision. Understanding why it's that way will help us feel less irritated about it.

[BoltClock]

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

[Berkyjay]

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.

[BoltClock]

@GetFree: The css-pseudo-4 spec seems to suggest 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.

[Henry Garcia De Guzman]

why not use a.m_title { text-transform: uppercase; }

[BoltClock]

@Henry Garcia De Guzman: Because that uppercases everything, not just the first letter (of each word or sentence or whatever).

[Diego Somar]

Thanks! You are a ninja! -> :first-letter

[Fanky]

:first-letter doesn't work with inline elements, set to display:inline-block if this is your case. (stackoverflow.com/questions/7631722/…)

[catamphetamine]

Your answer is incorrect: display: block is not required, display: inline-block can be used instead. Correct your answer.

[c3media]

Worked for me then it is necessary !important; too

[godblessstrawberry]

@c3media importance will only increase rule specificity isn't it? so thats just your particular case where !important is required

[jerinisready]

Yoou got the hack! I have a senario of complete Uppercase and this Backed!

[Admin]

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.