Couleurs d'arrière-plan alternatives pour les éléments de liste

J'ai une liste et chaque élément est lié, y a-t-il un moyen d'alterner les couleurs d'arrière-plan de chaque élément?

<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 diriez-vous d'un joli CSS3?

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

Si vous voulez le faire uniquement en CSS, vous auriez une classe que vous attribueriez à chaque élément de liste alternatif. Par exemple

<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 votre liste est générée dynamiquement, cette tâche serait beaucoup plus facile.

Si vous ne souhaitez pas avoir à mettre à jour manuellement ce contenu à chaque fois, vous pouvez utiliser la bibliothèque jQuery et appliquer un style en alternance à chaque <li>élément de votre liste:

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

Et votre code jQuery:

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

Vous pouvez y parvenir en ajoutant des classes de style alternées à chaque élément de la liste

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

Et puis le coiffer comme

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

Vous pouvez automatiser davantage ce processus avec javascript (exemple jQuery ci-dessous)

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

Essayez d'ajouter une paire d'attributs de classe, par exemple «pair» et «impair», à des éléments de liste alternés, par exemple

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

Dans une section <style> de la page HTML, ou dans une feuille de style liée, vous définiriez ces mêmes classes, en spécifiant les couleurs d'arrière-plan souhaitées:

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

Vous souhaiterez peut-être utiliser une bibliothèque de modèles au fur et à mesure que vos besoins évoluent pour vous offrir une plus grande flexibilité et réduire la saisie. Pourquoi taper tous ces éléments de liste à la main?

Puisque vous utilisez du HTML standard, vous devrez définir une classe distincte et définir manuellement les lignes sur les classes.

Vous pouvez le faire en spécifiant des noms de classe alternés sur les lignes. Je préfère utiliser row0et row1, ce qui signifie que vous pouvez facilement les ajouter, si la liste est construite par programme:

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

Une autre façon serait d'utiliser javascript. jQuery est utilisé dans cet exemple:

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

Edit: Je ne sais pas pourquoi j'ai donné des exemples en utilisant des lignes de tableau ... remplacer trpar liet tablepar ulet cela s'applique à votre exemple

Si vous utilisez la solution jQuery, cela fonctionnera sur IE8:

jQuery

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

CSS

.alternate {
background: black;
}

Si vous utilisez la solution CSS, cela ne fonctionnera pas sur IE8:

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

Ceci est défini la couleur d'arrière-plan sur les li pairs et impairs:

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

Vous pouvez en codant en dur la séquence, comme ceci:

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

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