Whether css text-transform capitalize make other letters lowercase?

Question

By definition, text-transform: capitalize capitalizes the first letter of each word in the selected text. But it only works for the lowercase text. My text is all uppercase, how can I use css text-transform to make the first letter uppercase and other letters lowercase?

Answer 1

::first-letter can be used to select the first letter from the first line of block-level elements.

p {
  text-transform: lowercase;
}
p::first-letter {
  color: red;
  text-transform: capitalize;
}

<p class="capitalize">lowercase</p>
<p class="capitalize">UPPERCASE</p>