how can I make the first letter of each word capitalized when each word is capitalized?( :first-letter is not working )

Question

I am trying to assign a style to an element where its attribute index=0 The selector :first-letter is not working.

How can do it the selector by attribute (in this case [index='0'] )?

My desired output for the first element is: Text 0 Paragraph (red text)

p[index='0']{
  color:red;
}

p[index='0']{
  text-transform: lowercase;
}

p[index='0']:first-letter {
  text-transform: uppercase;
}

<p index="0">TEXT 0 PARAGRAPH</p>
<p index="1">TEXT 1 PARAGRAPH</p>
<p index="2">TEXT 2 PARAGRAPH</p>
<p index="3">TEXT 3 PARAGRAPH</p>

Does this answer your question? [Lower case all then capitalize - pure CSS](https://stackoverflow.com/questions/21827377/lower-case-all-then-capitalize-pure-css) — Joseph Webber, Jun 15 '23 at 04:00

Tony · Accepted Answer · 2023-06-15T03:18:30.077

1

:first-letter only work on the first word. If your text is short you can use :first-line. Otherwise you need to use js to transform it

p[index='0']{
  color:red;
  text-transform: lowercase;
}

p[index='0']:first-line{
  text-transform: capitalize;
}

edited Jun 15 '23 at 03:18

answered Jun 15 '23 at 02:25

Tony

output is the first letter of the first word, I need the first letter of each word – yavgz Jun 15 '23 at 02:27
"capitalize" transforms the first character of each word to uppercase @yavgz – Tony Jun 15 '23 at 02:32
if the text is capitalized from the beginning , it not works, I updated my code – yavgz Jun 15 '23 at 02:38
Oke got it, I've updated the answer accordingly – Tony Jun 15 '23 at 03:19

1 Answers1