CODEWITHSUNDEEP
htmlcss
Thomas Kimber
Thomas Kimber

Reputation: 11057

CSS for cycling through multiple images to decorate unordered list bullets

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

e.g. 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');
}

Upvotes: 0

Views: 298

Answers (1)

Paulie_D
Paulie_D

Reputation: 114991

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>

Upvotes: 1

Related Questions