Lower case all then capitalize - pure CSS [duplicate]

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>

Solution 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>

Solution 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:

1. allow multiple scope values to be specified in the @text-transform rule;
2. add a descriptor to inherit a previous transformation without overriding its scope value; or
3. 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.

Solution 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