Change the colour of each property in a list (HANDLEBARS JS & CSS)

Question

Using Handlebars I'm able to show a list of artists taken from Spotify. I want to be able to change the colour and style of each artist but I don't know how to separate them to do so? How do I go about doing this? Many thanks for any help or pointing me in the right direction.

<script id="artists" type="text/x-handlebars-template">
    <h2>artists
      </h2>
    <dl class="pull-left">
      <dd class="text-overflow" id="artistcolumn">
        <ol>
          {{#each items}}
          <li>{{name}}</li>
          {{/each}}
        </ol>
      </dd>
    </dl>
  </script>

I've tried using:nth-of-type() or artistcolumn but it hasn't work?

I'm trying to get it to look like this

Answer 1

You could do it by setting the CSS of a list. Here is an example:

li:nth-child(1){
color: blue;
}; 

li:nth-child(2){
color:orange;
}; 

li:nth-child(3){
color:green;
}

---

Another method to set a color for each list entry would be to add a color to each item you render. If items is an Array of Objects you could set items[index].color = #0000FF and then apply the hex color to each li HTML element.