Change first letter uppercase and others lowercase using css

Question

I am trying to change all the text inside an li like teh first letter to Uppercase and the others are in lower like as follows. But it is not working,Why?

ul li{
      display: inline-table;
      text-transform: lowercase;
}
ul li:first-letter{
     text-transform: uppercase !important; 
}

<ul>
  <li>TEsTt1</li>
  <li>TeSt2</li>
  <li>TesT3</li>
  <li>TEsT4</li>
</ul>

Possible duplicate of [make the first character uppercase in css](http://stackoverflow.com/questions/5577364/make-the-first-character-uppercase-in-css) — Sumit patel, Aug 12 '16 at 07:01
This should solve your Problem: http://stackoverflow.com/questions/5577364/make-the-first-character-uppercase-in-css — Mike Lambert, Aug 12 '16 at 07:01

z0mBi3 · Answer 1 · 2016-08-12T09:13:30.940

5

Convert the innerText to lowercase and use the text-transform capitalize to get Pascal casing

document.querySelectorAll('ul>li')
.forEach(function(node){
  node.innerText = node.innerText.toLowerCase();
})

ul li{
      display: inline-table;
      text-transform: capitalize;
}

<ul>
  <li>tEst1</li>
  <li>teSt2</li>
  <li>TesT3</li>
  <li>tESt4</li>
</ul>

edited Aug 12 '16 at 09:13

answered Aug 12 '16 at 06:59

z0mBi3

1,534
8
9

score 2 · Answer 2 · answered Aug 12 '16 at 09:25

2

Update Css

ul li::first-letter {
  text-transform: uppercase; 

}
ul li
{
  text-transform: lowercase;   
}

Live Demo

answered Aug 12 '16 at 09:25

Sumit patel

3,807
9
34
61

use `display: inline-block;`. – Sumit patel Aug 12 '16 at 09:38

score 1 · Answer 3 · edited Aug 12 '16 at 09:31

1

document.querySelectorAll('ul>li')
.forEach(function(node){
  node.innerText = node.innerText.toLowerCase();
})

ul li{
      display: inline-table;
      text-transform: capitalize;
}

<ul>
  <li>tEst1</li>
  <li>teSt2</li>
  <li>TesT3</li>
  <li>tESt4</li>
</ul>

edited Aug 12 '16 at 09:31

z0mBi3

1,534
8
9

answered Aug 12 '16 at 07:00

Honza

683
7
22

1

you might need to use javascript to get it done for such cases – z0mBi3 Aug 12 '16 at 09:08
That's true, haven't thought of that – Honza Aug 12 '16 at 09:33

score 0 · Answer 4 · answered Aug 12 '16 at 07:00

0

ul>li{
text-transform:capitalize;
}

Use above code

answered Aug 12 '16 at 07:00

Vishal Panara

746
4
19

Change first letter uppercase and others lowercase using css

4 Answers4