How to set Bullet colors in UL LI html lists via CSS without using any images or span tags

Question

Consider a list with some <li> items that isn't sorted. Now, I've declared the bullets to be square shaped using list-style:square; however, if I use colour: #F00; for the <li> items, everything turns red!

I'm solely interested in changing the colour of the square bullets. Is there a simple way to define the colour of the bullets in CSS that doesn't include sprite images or span tags?

Answer 1

I use jQuery for this:

jQuery('li').wrapInner('<span class="li_content" />');

& with some CSS:

li { color: red; }
li span.li_content { color: black; }

Perhaps excessive, but useful if you're coding for a CMS and don't want to ask your editors to insert an extra space between each list item.