Can I use a pseudo-selector to style individual words? - html

Question

If i have something like
<p id="something">My Text Here</p>
Is it possible to use some kind of pseudo-selector in CSS to apply a style only to certain text elements from my text?
Example, i want:
"My" to be color: red;
and "Text" color: blue;

Answer 1

No, this is not possible.
There are pseudo-selectors such as :first-letter and :first-line, but you cannot select invidual words without wrapping them in elements that you can individually style:
<p id="something">
<span class="foo">My</span>
<span class="bar">Text</span>
<span class="baz">Here</span>
</p>
You'd then be able to style them individually:
.foo {
color: #ff0000;
}
.bar {
color: #00ff00;
}
.baz {
color: #0000ff;
}

Answer 2

No. If you want parts of the text to have different colors, you 'll have to wrap them inside separate elements (most likely, ''s). For example:
<p id="something"><span class="red">My</span> <span class="blue">Text</span> Here</p>
And of course this will also need the appropriate CSS for .red and .blue.
The exception to the above are the pseudo-selectors :first-letter and :first-line, but these do not offer any flexibility.

Answer 3

You can use first letter pseudo class for styling first letter
p:first-letter
{
font-size:200%;
color:#8A2BE2;
}
But you cant use pseudo class for 2nd "text" you have to wrap this in a html tag & style it separately.
Not possible with Styling words differently.

Answer 4

Other users already told you that it is not possible natively.
If you use jQuery, as I assume from your tag, you can do a little trickery from JavaScript and "tokenize" the text in the P tag with:
$("p").html($.map($("p").text().split(" ")​,function (i,e) {return "<span id='w"+e+"'>"+i+"</span>";}).join(" "));
This command takes a selector (p in this case, but you can use p#myId and so on) and substitutes every word:
This is a sentence
becomes
<span id='w0'>This</span>
<span id='w1'>is</span>
<span id='w2'>a</span>
<span id='w3'>sentence</span>
So you could use a CSS like:
p span.w2 {color: red;}
to color the third word.