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.

score 4 · Accepted Answer · answered Dec 14 '10 at 13:57

4

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

answered Dec 14 '10 at 13:57

littlegreen

7,290
9
45
51

I like hacks, but not jQuery and not Javascript to fix style things. Preparsing in PHP is a good idea. Good thing I'm using PHP :) – Rudie Dec 16 '10 at 17:45

score 1 · Answer 2 · answered Dec 14 '10 at 13:48

1

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.

answered Dec 14 '10 at 13:48

Gabriele Petrioli

191,379
34
261
317

score 1 · Answer 3 · answered Dec 14 '10 at 13:58

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;
}

I don't use javascript for layout/style fixes. I like pure. Nice of you to work out the function though! — Rudie, Dec 16 '10 at 17:46

pseudo selector for uppercase chars/words?

3 Answers3