How can I change the colour of each bullet point of a <li> item?

Question

Say, for example purposes I wanted a list of items that each had a different colour bullet point for each item.

The kicker is I need to do this relatively semantically & automatically, avoiding a user having to add a class or a piece of HTML whilst keeping the colour of the text black.

An example:

• List item with a red bullet
• List item with a blue bullet
• List item with a green bullet
• etc.

It poses an interesting problem - How would one go about do this so that a user can simply add a list of items and my code updates them accordingly.

Answer 1

Remove the default bullets, and add bullet characters (U+2022 BULLET or some other) as generated content. You can style the generated content separately. This is flexible and requires no extra markup (beyond some markup that distinguishes between different items, obviously) but has the drawback of failing on old versions of IE (no support to generated content).

Assuming markup

<ul class="mixed">
  <li class="red">One.</li>
  <li class="green">Two.</li>
</ul>

the style sheet could be

ul.mixed {
  list-style-type: none;
}
ul.mixed li:before {
 content: "\2022";
 padding-right: 0.5em;
}
li.red:before {
  color: red;
}
li.green:before {
  color: green;
}