Alternate background colors for list items

Question

I have a list, and each item is linked, is there a way I can alternate the background colors for each item?

<ul>     <li><a href="link">Link 1</a></li>     <li><a href="link">Link 2</a></li>     <li><a href="link">Link 3</a></li>     <li><a href="link">Link 4</a></li>     <li><a href="link">Link 5</a></li> </ul> 

Answer 1

How about some lovely CSS3?

li { background: green; } li:nth-child(odd) { background: red; } 

Answer 2

If you want to do this purely in CSS then you'd have a class that you'd assign to each alternate list item. E.g.

<ul>     <li class="alternate"><a href="link">Link 1</a></li>     <li><a href="link">Link 2</a></li>     <li class="alternate"><a href="link">Link 3</a></li>     <li><a href="link">Link 4</a></li>     <li class="alternate"><a href="link">Link 5</a></li> </ul> 

If your list is dynamically generated, this task would be much easier.

If you don't want to have to manually update this content each time, you could use the jQuery library and apply a style alternately to each <li> item in your list:

<ul id="myList">     <li><a href="link">Link 1</a></li>     <li><a href="link">Link 2</a></li>     <li><a href="link">Link 3</a></li>     <li><a href="link">Link 4</a></li>     <li><a href="link">Link 5</a></li> </ul> 

And your jQuery code:

$(document).ready(function(){   $('#myList li:nth-child(odd)').addClass('alternate'); });