Colores de fondo alternativos para los elementos de la lista

Tengo una lista y cada elemento está vinculado, ¿hay alguna forma de que pueda alternar los colores de fondo para cada elemento?

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

¿Qué tal un CSS3 encantador?

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

Si desea hacer esto únicamente en CSS, entonces tendrá una clase que asignaría a cada elemento de la lista alternativo. P.ej

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

Si su lista se genera dinámicamente, esta tarea sería mucho más fácil.

Si no desea tener que actualizar manualmente este contenido cada vez, puede usar la biblioteca jQuery y aplicar un estilo alternativamente a cada <li>elemento de su 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>

Y su código jQuery:

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

Puede lograr esto agregando clases de estilo alternas a cada elemento de la 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>

Y luego peinarlo como

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

Puede automatizar aún más este proceso con javascript (ejemplo de jQuery a continuación)

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

Intente agregar un par de atributos de clase, digamos 'par' e 'impar', para alternar elementos de lista, por ejemplo

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

En una sección <style> de la página HTML, o en una hoja de estilo vinculada, definirías esas mismas clases, especificando los colores de fondo deseados:

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

Es posible que desee utilizar una biblioteca de plantillas a medida que evolucionen sus necesidades para brindarle una mayor flexibilidad y reducir el mecanografiado. ¿Por qué escribir todos esos elementos de la lista a mano?

Dado que utiliza HTML estándar, deberá definir una clase separada y establecer manualmente las filas para las clases.

Puede hacerlo especificando nombres de clases alternos en las filas. Prefiero usar row0y row1, lo que significa que puede agregarlos fácilmente, si la lista se crea mediante programación:

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

Otra forma sería usar javascript. jQuery se está utilizando en este ejemplo:

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

Editar: no sé por qué di ejemplos usando filas de tabla ... reemplace trcon liy tablecon uly se aplica a su ejemplo

Si usa la solución jQuery , funcionará en IE8:

jQuery

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

CSS

.alternate {
background: black;
}

Si usa la solución CSS , no funcionará en IE8:

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

Se establece el color de fondo en li pares e impares:

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

Puede codificar la secuencia, así:

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

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