Autres couleurs d'arrière-plan pour les éléments de liste

Question

J'ai une liste, et chaque élément est lié, y at-il un moyen que je peux alterner les couleurs d'arrière-plan pour 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 de CSS3?

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

Answer 2

Vous pouvez par hardcoding la séquence, comme suit:

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

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

Answer 3

Vous pouvez y parvenir en ajoutant des classes de style alternatif à 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 il styling alors comme

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

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

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

Answer 4

Puisque vous en utilisant HTML standard, vous devrez définir la classe distincte et manuelle définir les lignes aux classes.

Answer 5

Vous pouvez le faire en spécifiant l'alternance des noms de classes sur les lignes. Je préfère utiliser row0 et row1, ce qui signifie que vous pouvez facilement les ajouter, si la liste est en cours de construction 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 les lignes de table ... remplacer tr avec li et table avec ul et il applique à votre exemple

Answer 6

Si vous voulez le faire purement en CSS, alors 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 voulez pas avoir à mettre à jour manuellement ce contenu chaque fois, vous pouvez utiliser la bibliothèque jQuery et appliquer un style tour à tour à chaque élément <li> 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 code jQuery :

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

Answer 7

Essayez d'ajouter une paire d'attributs de classe, dites '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 < de style > de la page HTML, ou dans une feuille de style lié, vous définiriez ces mêmes classes, en spécifiant vos couleurs de fond souhaitées:

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

Vous pouvez utiliser un bibliothèque de modèles à 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?

Answer 8

Si vous utilisez la solution jQuery il fonctionnera sur IE8:

jQuery

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

CSS

.alternate { 
background: black; 
} 

Si vous utilisez le soloution CSS il gagné ne fonctionne pas o n IE8:

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

Answer 9

Ceci est mis en couleur de fond sur pair et impair li:

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