Utilisation de CSS: even et: pseudo-classes impaires avec des éléments de liste

Est-il possible d’utiliser des pseudo-classes CSS sur des éléments de liste?

Je m’attendrais à ce que les éléments suivants produisent une liste de couleurs en alternance, mais j’obtiens plutôt une liste d’articles bleus:

   li { color: blue } li:odd { color:green } li:even { color:red }    
  • ho
  • ho
  • ho
  • ho
  • ho

Démo: http://jsfiddle.net/thirtydot/K3TuN/1323/

 li { color: black; } li:nth-child(odd) { color: #777; } li:nth-child(even) { color: blue; } 
 
  • ho
  • ho
  • ho
  • ho
  • ho

Le problème avec votre CSS réside dans la syntaxe de vos pseudo-classes.

Les pseudo-classes paires et impaires devraient être:

 li:nth-child(even) { color:green; } 

et

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

Démo: http://jsfiddle.net/q76qS/5/

Utilisez ceci:

 li { color:blue; } li:nth-child(odd) { color:green; } li:nth-child(even) { color:red; } 

Voir ici pour plus d’informations sur le support du navigateur: http://kimblim.dk/css-tests/selectors/

 li:nth-child(1n) { color:green; } li:nth-child(2n) { color:red; } 
 
  • list element 1
  • list element 2
  • list element 3
  • list element 4

Ci-dessous, l’exemple de la couleur css paire et impaire

      

The first Odd.

The second Even.

The third Odd.

The fourth Even.

   $(document).ready(function(){ var a=0; var ac; var ac2; $(".names li").click(function(){ var b=0; if(a==0) { var accc="#"+ac2; if(ac=='part2') { $(accc).css({ "background": "#322f28", "color":"#fff", }); } if(ac=='part1') { $(accc).css({ "background": "#3e3b34", "color":"#fff", }); } $(this).css({ "background":"#d3b730", "color":"#000", }); ac=$(this).attr('class'); ac2=$(this).attr('id'); a=1; } else{ var accc="#"+ac2; //alert(accc); if(ac=='part2') { $(accc).css({ "background": "#322f28", "color":"#fff", }); } if(ac=='part1') { $(accc).css({ "background": "#3e3b34", "color":"#fff", }); } a=0; ac=$(this).attr('class'); ac2=$(this).attr('id'); $(this).css({ "background":"#d3b730", "color":"#000", }); } });