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; }
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", }); } });