Cores de fundo alternativas para itens de lista

Eu tenho uma lista e cada item está vinculado, há uma maneira de alternar as cores de fundo para cada 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>

Que tal um adorável CSS3?

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

Se você quiser fazer isso puramente em CSS, terá uma classe que atribuirá a cada item alternativo da lista. Por exemplo

<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>

Se sua lista for gerada dinamicamente, essa tarefa seria muito mais fácil.

Se você não quiser ter que atualizar manualmente este conteúdo toda vez, você pode usar a biblioteca jQuery e aplicar um estilo alternadamente a cada <li>item em sua lista:

<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>

E seu código jQuery:

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

Você pode conseguir isso adicionando classes de estilo alternadas a cada item da lista

<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>

E então estilizá-lo como

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

Você pode automatizar ainda mais esse processo com javascript (exemplo de jQuery abaixo)

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

Tente adicionar um par de atributos de classe, digamos 'par' e 'ímpar', a elementos de lista alternados, por exemplo

<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>

Em uma seção <style> da página HTML ou em uma folha de estilo vinculada, você definiria essas mesmas classes, especificando as cores de fundo desejadas:

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

Você pode querer usar uma biblioteca de modelos à medida que suas necessidades evoluem para fornecer maior flexibilidade e reduzir a digitação. Por que digitar todos esses elementos da lista manualmente?

Uma vez que você usa HTML padrão, você precisará definir uma classe separada para e definir manualmente as linhas para as classes.

Você pode fazer isso especificando nomes de classes alternados nas linhas. Eu prefiro usar row0e row1, o que significa que você pode adicioná-los facilmente, se a lista estiver sendo construída programaticamente:

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

Outra forma seria usar javascript. jQuery está sendo usado neste exemplo:

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

Edit: Não sei por que dei exemplos usando linhas da tabela ... substitua trpor lie tablepor ule isso se aplica ao seu exemplo

Se você usar a solução jQuery, ela funcionará no IE8:

jQuery

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

CSS

.alternate {
background: black;
}

Se você usar a solução CSS, ela não funcionará no IE8:

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

Isso é definido como cor de fundo em li par e ímpar:

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

Você pode codificar a sequência da seguinte maneira:

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

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