Couleurs de fond alternatives pour les éléments de la liste

Question

J'ai une liste et chaque élément est lié. Est-il possible 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>
 

Answer 1

Que diriez-vous d'une belle CSS3?

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

Answer 2

Si vous voulez faire cela, uniquement en CSS, alors vous auriez une classe que vous devez attribuer à chaque liste alternative de l'élément. 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>

Si votre liste est générée dynamiquement, cette tâche serait beaucoup plus facile.

Si vous ne voulez pas avoir à mettre à jour manuellement ce contenu à chaque fois, vous pouvez utiliser la bibliothèque jQuery et appliquer un style alternativement à chaque <li> élément dans 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 jQuery code:

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

Answer 3

Vous pouvez y parvenir en ajoutant des classes de style en alternance à 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 style 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');
});
 

Answer 4

Étant donné que vous utilisez le langage HTML standard, vous devez définir une classe distincte et définir manuellement les lignes des classes.