117

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>
1
  • 23
    this is also known as "tiger striping" and no I am not kidding Dec 11, 2008 at 7:42

9 Answers 9

319

How about some lovely CSS3?

li { background: green; }
li:nth-child(odd) { background: red; }
3
  • @Adam C Can you suggest a way to make this apply for dynamic list-view? When I tried it with dynamic list-view, where data was coming from web-service, this didn't work!
    – SKT
    Oct 31, 2012 at 15:02
  • 4
    Does anybody have an example of this that works well with nested lists? That is, the background color of first item in the nested list would have the opposite color of the background color of the list item just before the nested list. Also, the background color of the next list item of the parent list is the opposite of the background color of the last list item in the nested list. Apr 30, 2014 at 13:59
  • One can leave out the first statement so that the existing background colour is used.
    – xilef
    Nov 10, 2014 at 10:06
53

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');
});
0
6

You can achieve this by adding alternating style classes to each list item

<ul>
    <li class="odd"><a href="link">Link 1</a></li>
    <li><a href="link">Link 2</a></li>
    <li class="odd"><a href="link">Link 2</a></li>
    <li><a href="link">Link 2</a></li>
</ul>

And then styling it like

li { backgorund:white; }
li.odd { background:silver; }

You can further automate this process with javascript (jQuery example below)

$(document).ready(function() {
  $('table tbody tr:odd').addClass('odd');
});
6

This is set background color on even and odd li:

  li:nth-child(odd) { background: #ffffff; }
  li:nth-child(even) { background: #80808030; }
3

Try adding a pair of class attributes, say 'even' and 'odd', to alternating list elements, e.g.

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

In a <style> section of the HTML page, or in a linked stylesheet, you would define those same classes, specifying your desired background colours:

li.even { background-color: red; }
li.odd { background-color: blue; }

You might want to use a template library as your needs evolve to provide you with greater flexibility and to cut down on the typing. Why type all those list elements by hand?

2

Since you using standard HTML you will need to define separate class for and manual set the rows to the classes.

1
  • This and the fact that you can do it automatically with a javascript after effect like the accepted answer says. I just wanted to give you a +1 for a correct answer.
    – Karl
    Dec 11, 2008 at 4:28
1

You can do it by specifying alternating class names on the rows. I prefer using row0 and row1, which means you can easily add them in, if the list is being built programmatically:

for ($i = 0; $i < 10; ++$i) {
    echo '<tr class="row' . ($i % 2) . '">...</tr>';
}

Another way would be to use javascript. jQuery is being used in this example:

$('table tr:odd').addClass('row1');

Edit: I don't know why I gave examples using table rows... replace tr with li and table with ul and it applies to your example

1

If you use the jQuery solution it will work on IE8:

jQuery

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

CSS

.alternate {
background: black;
}

If you use the CSS soloution it won't work on IE8:

li:nth-child(odd) {
    background: black;
}
-9

You can by hardcoding the sequence, like so:

li, li + li + li, li + li + li + li + li {
  background-color: black;
}

li + li, li + li + li + li {
  background-color: white;
}
2
  • 5
    That's a massive pain in the ass and it doesn't work in IE6 :(
    – nickf
    Dec 11, 2008 at 3:23
  • @nickf Yeah. I think the "proper" way involves CSS3 and next to nothing supports that.
    – sblundy
    Dec 11, 2008 at 3:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.