How to color specific word in a container using CSS

Question

Suppose I have a container:

 
 This is a red apple 

How to color a word \"red\" with red color? Some

Answer 1

Use pseudo elements to add the coloured word and some careful positioning to cover the initial black instance. It's dirty, but it works.

#container
{
    position: relative;
    font-family: monospace;
    margin: 0;
    padding: 0;
    font-size: 15px;
}

#container:after
{
    content: "red";
    color: red;
    position: absolute;
    left: 90px
}

Demo

---

EDIT: Also, a variation that works with proportional fonts (but doesn't render quite so cleanly, at least for me, in Chrome):

#container
{
    position: relative;
    margin: 0;
    padding: 0;
}

#container:before
{
    content: "This is a ";
    position: absolute;
    z-index: 2
}

#container:after
{
    content: "This is a red";
    color: red;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1
}

Demo 2

Answer 2

Simple but anyway RIGHT answer: NO.

Please, don't be rude with others in your comments, they took time to read your question, think about how they would solve such a problem, write an answer (or a comment) and... help YOU... they don't deserve be treated in a rude way.

Best regards and good look.

Miguel.

BTW: check Wrap certain word with <span> using jquery and http://forum.jquery.com/topic/wrapping-specific-words-inside-span-elements

Answer 3

Sadly CSS does not have any selector right now to achieve what you need. You have to use JavaScript or Server Side Scripting to achieve what you want.

Answer 4

Here's some code that uses jQuery to wrap a class around the word red, which can be colored.

 <div id="container">This is a red apple</div>

 $("#container:contains('red')").each(function(){
     $(this).html($(this).html().replace("red", "<span class='red'>red</span>"));
 });

Answer 5

So I have the same task, and the solution is pretty simple, but tricky You need to add :after pseudo-element and then:

#container:after {
  content: "";
  position: absolute;
  width: 200px;
  height: 50px;
  background-color: red;
  top: 10px;
  left: 100px;
  z-index: -1;
}

Adjust top, left, height, width for your case.

Answer 6

I was dealing with this same issue. I had my base content wrapped in a

tag and all I did was surround each word I wanted highlighted in a tag and used CSS to change the colour of tags to red. Easy and simple.

e.g

<p>Base text, and then I want <p1>THIS</p1> word highlighted
</p>

p1 {
color: red;
}

Worked so well and did not mess up formatting at all.