CSS for cycling through multiple images to decorate unordered list bullets

Question

I want to replace a bullet with one from a collection of images

<ul>
    <li> List item 1 </li>
    <li> list item 2 </li>
    <li> List item 3 </li>
    <li> List item 4 </li>
</ul>

I know it's possible to define an image in css as part of the list-style-image css attribute:

ul{
list-style-image: url('/images/circle.jpg');
}

but this is applies a single image to all bullets. What I'd like to do is provide a sequence of images, and have each bullet display a different image from the list in turn, wrapping as appropriate.

For example, if I provided a sequence of images ['red.jpg','amber.jpg','green.jpg'] , if I applied that to an unordered list of 8 bullets, I'd like it to decorate those list items using the images in the sequence [red, amber, green, red, amber, green, red, amber] .

Is there a <ul> or <li> method of styling this, or should I construct some other markup separately that does the same thing, just not using <ul> / <li> ?

eg what's the closest I can get to the below?

ul.traffic_lights {
list-style-image: [url('/images/red_circle.jpg', url('/images/amber_circle.jpg', url('/images/green_circle.jpg');
}

Answer 1

nth-of-type should do it.

You can adapat the styling as required but this sets the pattern.

 li { font-size: 2em; } li:nth-of-type(3n+1) { color: red; } li:nth-of-type(3n+2) { color: yellow; } li:nth-of-type(3n+3) { color: green; } 

 <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> <li>Item 6</li> <li>Item 7</li> <li>Item 8</li> <li>Item 9</li> <li>Item 10</li> </ul>