Style certain characters with CSS

Question

I'm assuming it's not possible, but just in case it is or someone has a nice trick up their sleeves, is there a way to target certain characters using CSS?

For example make all letters z in paragraphs red, or in my particular case set vertical-align:sup on all 7 in elements marked with the class chord.

Answer 1

Hi I know you said in CSS but as everybody told you, you can't, this is a javascript solution, just my 2 cents.

best...

JSFiddle

css

span.highlight{
   background:#F60;
    padding:5px;
    display:inline-block;
    color:#FFF;
}

p{
   font-family:Verdana;   
}

html

<p>
    Let's go Zapata let's do it for the revolution, Zapatistas!!!   
</p>

javascript

jQuery.fn.highlight = function (str, className) {    
    var regex = new RegExp(str, "gi");

    return this.each(function () {
        this.innerHTML = this.innerHTML.replace(regex, function(matched) {return "<span class=\"" + className + "\">" + matched + "</span>";});
    });
};

$("p").highlight("Z","highlight");

Result

Answer 2

That's not possible in CSS. Your only option would be first-letter and that's not going to cut it. Either use JavaScript or (as you stated in your comments), your server-side language.

Answer 3

The only way to do it in CSS is to wrap them in a span and give the span a class. Then target all spans with that class.