Is it possible to style this? Options

[Terminator]

For an unordered list, is it possible to add a CSS style to change the color of the entire first word including the colon? But keep the whole word that is after the colon the default font color?

example:

<ul class="list1">
<li>Question: Answer</li>
<li>Question: Answer</li>
<li>Question: Answer</li>
</ul>

Basically I would want "Question:" to be an orange color, the entire word including the colon :

Then "Answer" would stay as the default font color

I know about :first-of-type and ::first-line, etc, but this is usually going to be on one line.

I was trying to avoid doing it this way:

<ul class="list1">
<li><mark class="orange">Question:</mark> Answer</li>
<li><mark class="orange">Question:</mark> Answer</li>
<li><mark class="orange">Question:</mark> Answer</li>
</ul>

thanks

This post has been edited by Terminator: May 8 2015, 05:02 PM

[Christian J]

For an unordered list, is it possible to add a CSS style to change the color of the entire first word including the colon? But keep the whole word that is after the colon the default font color?

Not that I know of.

I was trying to avoid doing it this way:

You could use a definition list instead, that way the markup becomes a little more semantically meaningful as well. See http://www.w3.org/TR/html5/grouping-conten...#the-dl-element

[pandy]

There are JavaScript solutions to work around the lack of a :first-word pseudo element. Here's one, but it's oldish. There's problably newer ones around. Not saying this script is bad, I just don't know how it fares in newer browsers.

http://www.dynamicsitesolutions.com/javasc...-word-selector/