CSS text-transform capitalize on all caps

Question

Here is my HTML:

<a href="#" class="link">small caps</a> & 
<a href="#" class="link">ALL CAPS</a>

Here is my CSS:

.link {text-transform: capitalize;}

The output is:

Small Caps & ALL CAPS

and I want the output to be:

Small Caps & All Caps

Any ideas?

Answer 1

captialize only effects the first letter of the word. http://www.w3.org/TR/CSS21/text.html#propdef-text-transform

Answer 2

I was not able to comment for Harmen because of lack of reputation so writing again the same answer of harmen. I have added LowerCase() to the answer so it can convert "ALL CAPS" to "All Caps".

$.fn.ucwords = function() {
return this.each(function(){
var val = $(this).text(), newVal = '';
val = val.split(' ');

for(var c=0; c < val.length; c++) {newVal += val[c].substring(0,1).toUpperCase() + val[c].substring(1,val[c].length).toLowerCase() + (c+1==val.length ? '' : ' ');
}
$(this).text(newVal);  
});
 $('a.link').ucwords();​ 

Answer 3

Convert with JavaScript using .toLowerCase() and capitalize would do the rest.