Graphical Ordered List

[abeall]

What is the best approach to creating an ordered list which uses a custom graphic for each number? The only way I know how is to apply a custom class to each list-item, but that's very clumsy and a big pain when items are moved. I suppose I could use Javascript to parse it out but that's even less desirable unless a simple script to do so exists already.

[Fang]

Use css or server-side scripting in preference to JavaScript.

[abeall]

Yes, CSS is my preference, like I said... what is the approach?

[Fang]

Give each list item an id or class to apply a background image to the element. Add padding to the element's text, the same width as the image and remove the default list-style-image.

[abeall]

Right, but my problem with that (check my original post) is that it's very clumsy since each item has to be hard coded to a number, so moving/adding/removing list-items is a huge pain -- are you saying that's really the only way in CSS? There's no way to do it purely from CSS rules, like specifying styles for first-list-item, second-list-item, third-list-item, and so on?

[Fang]

nth-of-type (http://www.css3.info/selectors-test/test-nthtype.html#nthtype) would work in modern browsers, except for IE.
Hard coding is the only way :(

[abeall]

Interesting. Thanks for your help!

[rnd me]

ul>li { first}
ul>li+li{ second}
ul>li+li+li { third}

also, you would just need nth-child, no type needed.

[abeall]

Cool, that method appears to have IE8 support, thank-you.