Autres couleurs d’arrière-plan pour les éléments de la 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 pour chaque élément?

 

Que diriez-vous d’une belle CSS3?

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

Si vous voulez faire cela uniquement en CSS, vous aurez une classe que vous assignerez à chaque autre élément de la liste. Par exemple

  

Si votre liste est générée dynamicment, 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 alternativement à chaque élément

  • de votre liste:

      

    Et votre code jQuery:

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

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

      

    Et puis le styling 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’append une paire d’atsortingbuts de classe, disons “pair” et “impair”, à des éléments de liste alternés, par exemple

      

    Dans une section

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

    Vous voudrez peut-être utiliser une 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 à la main?

    Étant donné que vous utilisez du code HTML standard, vous devez définir une classe distincte et définir manuellement les lignes dans les classes.

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

     for ($i = 0; $i < 10; ++$i) { echo '...'; } 

    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 tr avec li et table avec ul et 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; } 

    C’est la couleur d’arrière-plan sur li et pair impair:

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