Selectors or Pseudos for individual characters?

[TheJoshMan]

Ok, so I've been scouring the web looking to see if this even exists (I don't think it does), and haven't found anything yet.

I was wondering if anyone knows if there is such a thing in CSS2 that will allow you to style individual ASCII characters and/or individual plain characters (a-z 0-9)?

I've played around with a few ideas, none of which have worked, which is making me lean more towards the idea that nothing like this exists.

Just Ideas:


"{
color:blue;
}

p:char('z'){
color:blue;
}


If such a thing existed it would be a great time reducer. Rather than having to use classes and spans... Just style the character itself.

[Medyman]

That would be a great time-reducer. Unfortunately, nothing like that exists. Not in CSS anyway.

You could use JavaScript. jQuery (http://jquery.com/) makes this very easy. Patrick Haney (http://patrickhaney.com/) at Harvard U. recently had a post about styling ampersands (http://patrickhaney.com/thinktank/2008/08/19/automatic-awesompersands) individually. You could use his technique with any character or characters.

[TheJoshMan]

wow! that is pretty simple... Thanks.

Let me ask you quickly, as I don't deal in a lot of "scripting"... If I were to style ampersands, or any other character which is used frequently throughout the site... Would this slow down the speed by having this script running in the background for many characters?

[Medyman]

Adding any bit of javascript will slow down your page's rendering time slightly. Something of this sort where you're manipulating the DOM will 100% have an affect. How much of one it'll have is hard to say. It really depends on what steps you've taken to optimize the code and how many characters you're manipulating.

If you're using Firefox & Firebug (which I think you are), you should look at the YSlow plugin (http://developer.yahoo.com/yslow/) for tips on optimizing your code/site.

[TheJoshMan]

ah, thought so... Ok, thanks for the info (and the link, I'll check that out)

[Medyman]

One small tip: Move your JS to the bottom of your page. That'll do wonders for your page rendering time, especially when running JS after the DOM has completed loading (as you would be using Patrick's technique).

[TheJoshMan]

ok, will do. Thank you.