Proper way to change individual list item bullets

Question

I have css like this:

.done {list-style-image:url('images/tick.gif')}
.notdone {list-style-image:url('images/cross.gif')}

And html like this:

<ul>
 <li class="done">Done</li>
 <li class="notdone">Not Done</li>
</ul>

Works great on IE6 and FF. Each li item has a different image for the bullet. But all of the docs I see on list-style-image says it should be applied to to the ul tag.

Is there a proper or standards-based way of doing what I am trying to do, or is this it?

EDIT: http://www.w3.org/TR/CSS21/generate.html

It looks like it doesn't say that I CAN'T use list-style-image on an li tag, but the examples don't show that.

Answer 1

I don't see a problem with what you are doing. What docs are you talking about?

Answer 2

I believe docs you are referring to is when you want the bullets to follow a certain format, which is why the class is applied at the parent tag

<ul>

in those cases. Since you have two images that each you want to have its own bullet I see nothing wrong with what you are doing

Answer 3

In theory all entries in a list have the same bullet style. Those lists are historically found in things like outlines where at any level you have 1,2,3 or A,B,C and it would make no sense to mix the different ordinal types with one another. I don't think there's anything wrong with doing what you are doing stylistically. But I don't know if it is correct CSS.

Answer 4

Following up to your edit...

If you look at the default style sheet for CSS, you will see that li is defined as follows:

li              { display: list-item }

In the link you provided, list-style-image is valid on any element with display: list-item. Therefore, according to the standard, what you are doing is valid.

Answer 5

The CSS 2.1 standard gives examples where list-style is applied directly to an li.

Although authors may specify 'list-style' information directly on list item elements (e.g., "li" in HTML), they should do so with care.

Followed by:

ol.alpha li   { list-style: lower-alpha } /* Any "li" descendant of an "ol" */ 
ol.alpha > li { list-style: lower-alpha } /* Any "li" child of an "ol" */

So I would draw the conclusion that it is OK to apply list-style-type or list-style-image to list items directly, as long as you are careful and understand the cascade of your CSS rule.

Answer 6

I've run into inconsistencies when it comes to the spacing of a list-image from browser to browser. As a result, I would usually skip the whole issue, and do something like this instead:

li {list-style: none; padding-left: 15px;}    
li.done {background: url(images/tick.gif) no-repeat left top;}
li.notdone {background: url(images/cross.gif) no-repeat left top;}

The end result is a bullet using the same images you intended in the first place, but you have much more control over the actual placement and spacing. Tweaking needed probably, but that's the general idea.