Style a specific word or character?

I seem to remember a way to select a specific character or string of characters in CSS, does anyone know what I’m on about?

Say I had a paragraph with this markup:

<p class="style">qwerty</p>

Now say I wanted to make the “r” be red, I know most of it would be this:

p.style { color: red; }

But that will make the entire paragraph red. Is there a way to make it only the “r” without adding a SPAN tag or any other XHTML markup?

By the way there is a time limit on this so the sooner people can get back to me the better!

If you want to add emphasis to the character then you should really use <strong>. Why do you not want to use any markup?

If you want to highlight a specific word or character throughout a page then you could use javascript although this will involve adding an element (throught the script) anyway…

Crap.

Basically, It’s for page titles and I need them to be none-images and client-editable. Their HTML knowledge is non-existent but they are unwilling to pay for any updates. So I’m looking at options that would allow for some manner of extra style but wouldn’t really require the client to have to do anything extra.

I could create the effect I want by simply wrapping the character (for my purposes it’s a space) in a span but I can’t expect the client to always do that thus it’s not an option.

Are you using a CMS, if so you could perhaps build something into it do what you want.

If not, then you can use javascript to achieve this:


#title span.space{
   background: red;
}


<h1 id="title">The title text with spaces...</h1>

You have two options when it comes to the script… -

The quick way:


document.getElementById('title').innerHTML = document.getElementById('title').innerHTML.replace(/ /g,'<span class="space"> </span>');

Or… The CORRECT way:


var title = document.getElementById('title');
var str = document.getElementById('title').firstChild.nodeValue.replace(/ /g,'<space>');
title.removeChild(title.firstChild);
str = str.split('<space>');
for( var i = 0 ; i < str.length ; ++i ) {
 var newNode = document.createElement('span');
 var newText = document.createTextNode(str[i]);
 newNode.appendChild(newText);
 title.appendChild(newText)
 if(i!=str.length-1) {
  var SpaceSpan = document.createElement('span');
  SpaceSpan.className = 'space';
  SpaceSpan.appendChild(document.createTextNode(' '));
  title.appendChild(SpaceSpan);
 }
}

 

Nah, there’s no CMS to all of this, which is why I’m trying to make it as simple as possible.

Also, they can’t afford to pay me to make updates which pretty much moved a CMS off the list.