How to change the color of each marker point of an <li> element?

Question

Say, for example, for the purposes I need, a list of elements, each of which had different marker points for each element.

Kicker - it is necessary to do this relatively semantically and automatically, avoiding adding a user to a class or HTML fragment, while maintaining the text color in black.

Example:

• Red stamp list item
• List item with blue bullet
• Green bullet list item
• and etc.

This presents an interesting problem: how to do it so that the user can just add a list of elements and my code updates them accordingly.

Answer 1

Remove the default bullets and add bullet characters (U + 2022 BULLET or some others) as the generated content. You can create separately created content. This is flexible and does not require additional markup (outside of some markup that distinguishes between different elements, obviously), but has the disadvantage of failure in older versions of IE (without support for the generated content).

Assuming markup

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

style sheet can 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; } 

Answer 2

@Sapan's solution above covers keeping text set color. To automatically change the color of a bullet, you need nth-child:

 ul li:nth-child(3n) { color:green; } ul li:nth-child(3n+1) { color:red; } ul li:nth-child(3n+2) { color:blue; } 

It is supported in ie9 and in all good browsers, but for earlier versions, i.e. you will need javascript fallback / manually added classes in html / accept it will not happen . In addition, the above assumes that you have a finite number of colors that you want to make in a fixed order. If you want something more flexible, then javascript is probably the best option overall.

Answer 3

The Wheresrhys solution (below) is best for me, I just used it to create a menu for wordpress / joomla, where css can automatically change color when adding a new li. I would raise a bet, but I still do not have reputation points.

 ul li:nth-child(3n) { color:green; } ul li:nth-child(3n+1) { color:red; } ul li:nth-child(3n+2) { color:blue; } 

It is supported in ie9 and all good browsers, but for earlier versions, i.e. you will need javascript fallback / manually added classes in html / accept, this will not happen. In addition, the above assumes that you have a finite number of colors that you want to make in a fixed order. If you need something more flexible, then javascript is probably the best option overall. "

One understanding for those who have no experience with css is that it works by making the nth child css style child of the main class, just as if you wrote ul li: hover. So your code should reference the object in the same way, thus ul li: nth-child. This means that if you want to apply this to an element when it freezes, your code will look like this: ul li: hover: nth-child (odd / even or number or equation.) I found this tutorial very useful because it has a link on the demo below. It should be noted that this is not compatible with IE 8 and below.

http://css-tricks.com/how-nth-child-works/

Answer 4

The biggest problem here is cross-browser compatibility. Oddly enough, I find it best to use css sprites as the LI background image.

Answer 5

You can wrap the text in li with <span> or <p> , and then use the following css:

 ul li.green { color:green; } ul li.red { color:red; } ul li span { color:navy; } 

Html example:

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

Answer 6

Using the :before class pseudo-class, you can easily customize your lists:

 li:before { content: "\00BB \0020"; color: Red; } 

Demo

This article from A-List-Apart covers the topic pretty well

Answer 7

use separate classes for each effect and apply them to

 li{padding-left:10px;} li.red{background-image: url(images/red.gif) no-repeat left 50%;} li.blue{background-image: url(images/blue.gif) no-repeat left 50%;} li.green{background-image: url(images/green.gif) no-repeat left 50%;}