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 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 2

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.