Lower case all then capitalize - pure CSS [duplicate] - capitalize

Question

This question already has answers here:
First lowercase the text then capitalize it. Is it possible with CSS?
(4 answers)
Closed 8 years ago.
I saw this topic here: First lowercase the text then capitalize it. Is it possible with CSS?
But it wasn't pure CSS. I have a div that contains this text:
<div>
RaWr rAwR
</div>
I want to use css to make it look like "Rawr Rawr". Cut if I just to text-transform capitalize it makes it "RaWr RAwR", the already uppercase letters remain upper case. So I need to lower case it all first then capitalize, is the solution to wrap it in a div?
I tried wrapping it in another div but it didnt work:
<style>
#test3 { text-transform: lowercase; }
#test3 div { text-transform: capitalize; }
</style>
<div id="test3"><div>RaWr rAwR</div></div>

Answer 1

This should do it when you have the single words in different div's
#test3 { text-transform: lowercase; }
#test3::first-letter { text-transform: uppercase; }
<div id="test3">haLLo</div>

Answer 2

Sadly, you cannot do this with pure CSS. For now your best hope is to either rewrite text to avoid medial/final capitals or use JavaScript. (Yes, my eyes are rolling too.)
Your suggested approach doesn't work because only one text-transform property value applies to an element at a time. When you specify something like…
#parent { text-transform: lowercase; }
#parent #child { text-transform: capitalize; }
…the value of text-transform on the child element is now capitalize, and nothing else. This is the only transformation applied to that element.
There is a draft proposal to allow authors to define custom mapping tables with an #text-transform rule, but as it stands I doubt it would work for this scenario. The problem is that the scope descriptor (where in a word the transformation applies) only takes one value—you could define a transformation on the whole word or some combination of the start, end or middle parts of a word, but it's not obvious if you could have different transformations for each part.
This seems to be acknowledged in Issue 8 on the wiki draft proposal, and multiple transforms were discussed a couple of years back on www-style. In that thread it is suggested that only a single text-transform value should be allowed on an element, and that combining should be done in the #text-transform rule; however, the draft spec notes:
If the text-transforms referred to have a different scope than the scope specified
in the text-transform that refers to them, they apply at the intersection of the
two scopes.
So a rule like this wouldn't work:
#text-transform lowercase-then-capitalize {
transformation: lowercase, "a-z" to "A-Z" single;
scope: initial;
}
I can see three obvious solutions:
allow multiple scope values to be specified in the #text-transform rule;
add a descriptor to inherit a previous transformation without overriding its scope value; or
permit multiple text-transform values for a selector.
The www-style mailing list might be a good place to take this if you ever want to see a pure CSS solution to this question.

Answer 3

You are using nested div,
So #test3 { text-transform: lowercase; } is applied for Parent div so it applies for Both Parent and Child Divs
when you override the #test3 div { text-transform: capitalize; } to the Child Div the first style text-transform: lowercase; is ignored

Answer 4

Unfortunately, until CSS 3 there is no way to do this in pure CSS way, as per this document there are only 5 possible values to text-transform and none of them will solve this requirement!
But in future there might be provision for custom rule for text transform similar to Counter Sytle