CSS word targeting

Question

I need to style a specific word with CSS, but I'm not sure how I would be able to do this. For some reason I can't assign any ID's or Classes to the elements of a list, this is the example:

<ul class="xxx"> <li><a href="#" class="xxx">White</a></li> <li><a href="#" class="xxx">Black</a></li> <li><a href="#" class="xxx">Blue</a></li> </ul>

For example, the word white with color: white; I cannot use nth-child because in a page on my website the order of the li can be different.

I was wondering if there is a way with CSS, to tell the color only of the li (or span) which contains white.

Is there anyone who knows how I could do this? Thank you!

No, CSS cannot detect content...it styles whole elements not parts of one. — Paulie_D, Dec 17 '14 at 12:03

score 1 · Answer 1 · answered Dec 17 '14 at 12:03

1

You should assign a class on them:

<ul class="xxx"> 
   <li><a href="#" class="xxx"><span class="yyy white">White</span></a></li> 
   <li><a href="#" class="xxx"><span class="yyy black">Black</span></a></li> 
   <li><a href="#" class="xxx"><span class="yyy blue">Blue</span></a></li> 
</ul>

And then apply the color:

.white{
    color: white;
}
.black{
    color: black;
}
.blue{
    color: blue;
}

answered Dec 17 '14 at 12:03

Bhojendra Rauniyar

83,432
35
168
231

Pretty sure "I cant assign any IDs to the elements of a list" means that OP can't modify the HTML at all. – James Donnelly Dec 17 '14 at 12:04
The OP is saying can't assign the IDs not class... – Bhojendra Rauniyar Dec 17 '14 at 12:05
The OP is saying this because there may be lots of white color divs/spans so can't assign the ID because id is unique. This is what OP is reffering... – Bhojendra Rauniyar Dec 17 '14 at 12:06
I'm really not sure how you can possibly know that based on what the OP has stated in the question... – James Donnelly Dec 17 '14 at 12:08
just a common sense! (I may be wrong too!) – Bhojendra Rauniyar Dec 17 '14 at 12:09
Ok, James Donnelly is right! I cant assign ID or CLASS – Nicola Dec 17 '14 at 12:17
But from the comment of Paulie i think i cannot do this because "CSS cannot detect content", its right? – Nicola Dec 17 '14 at 12:20
Yes, there's no other way around... – Bhojendra Rauniyar Dec 17 '14 at 12:21

CSS word targeting

1 Answers1