Home/ Questions/Q 168967
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T12:32:48+00:00

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>

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. 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.

    • 0