pseudo selector for uppercase chars/words?

Question

Is there a CSS pseudoselector for uppercase characters/letters/words? I want all my capitals to be a pt smaller and all the other characters the same size. A capital is not neccesarily the first character of a sentence (or word) nor the other way around.

Or maybe there's another way to find these characters in CSS? With a trick? I like tricks.

Answer 1

Well, there's the poor-supported first-letter selector, but that's not what you want.

You could of course also pre-parse your HTML in PHP, wrapping all caps in <span class="capital"></span> tags, but that's a hack.

Then of course you could always pull out the magic jQuery rabbit and alter your DOM at document load to include the spans. That's also a hack. Do you like hacks?

Let's see who else turns up with a magic trick :-)

Answer 2

I do not think this is possible.

Better to just wrap the capital letters with a span with a class and use that to style them.

Answer 3

This is not possible using CSS.

You could use Javascript to check all characters in your text for uppercase (e.g. by using if (yourtext == yourtext.toUpperCase())) and then wrap a <span> around them containing your CSS to style these.

Or something around these lines:

function wrapCaps() {
    var text = document.getElementById("my_text").value;
    for(i=0; i < text.length; i++) {
        if(text[i].charCodeAt(text[i]) >= 65 && text[i].charCodeAt(text[i]) <= 90)
        wrapNode(text[i], 'span');
    }
}

I didn't try it out (maybe somebody has the time to create a jsfiddle with this?), you might need to use replaceNode or something like that. The charCodeAt method just looks for uppercase letters, please note that no unicode characters like special greek uppercase letters will be included.
You now only need to style your span with something like:

#my_text span {
    font-size: 10px;
}