Multi Colored Lists

[moojoo]

This was asked and I thought it was interesting so here goes making bullets a different color from the list content.

Code: Select all

    
#foo li span {color:#FF6600;}

#foo li {color:#000;}

Code: Select all

<ol id="foo">
<li><span>Foo!</span></li>
</ol>

Easy and simple but effective.

[Accurax]

Nifty trick........ might be a good idea to provide some explanation to run along with it though

jusy imo

[moojoo]

making bullets and list content different colors. Too lazy to upload a screenshot atm.

[ukgeoff]

I think this is likely to confuse newcomers to css as you only have one <li> element and it has a <span> element inside it, so the spanned text is always going to be the #foo li span colour.

I think I know what you wanted to achieve but this isn't it. IMO.

[moojoo]

Hell man, if you have a better way to make bullets and li content different colors without using images let me know. Maybe with a selector?

[ukgeoff]

I originally interprited your post as meaning each li in a group of li's to be a different colour.

I now realise this is not what you meant. You want the bullett to be a different colour to the text but the same throughout the group of li's.

I'm with you now.

[moojoo]

Yeah Herkalees asked me about this the other day and this was the first solution I came up with in a pinch without using images. I have been playing with some selectors etc but couldn't find another way to do it... But for now this seems acceptable without too much extra markup.

[mreine]

I was under the same impression geoff.

The initial post title had me thinking that each list item would be a different color. The first sentence of his post explained it better, but still not real clear. After seeing the code it was definately clear.

Multi colored list items would just require a separate ID tag for each span and a coordinating CSS color declaration.

[Ryan Fait]

Yeah, the title is misleading. I've never thought of using a bullet that different from the text color. Interesting idea.