Comment styliser des éléments pairs et impairs?

281

Est-il possible d'utiliser des pseudo-classes CSS pour sélectionner des instances paires et impaires d'éléments de liste?

Je m'attends à ce que les éléments suivants produisent une liste de couleurs alternées, mais à la place, j'obtiens une liste d'éléments bleus:

<html>
    <head>
        <style>
            li { color: blue }
            li:odd { color:green }
            li:even { color:red }
        </style>
    </head>
    <body>
        <ul>
            <li>ho</li>
            <li>ho</li>
            <li>ho</li>
            <li>ho</li>
            <li>ho</li>
        </ul>
    </body>
</html>
html css css-selectors Armand
la source

Réponses:

630

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

li {
    color: black;
}
li:nth-child(odd) {
    color: #777;
}
li:nth-child(even) {
    color: blue;
}
<ul>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
</ul>
Développer l'extrait

Documentation:

thirtydot
la source
33
Juste une note peut-être: nth-child n'est pas pris en charge par IE 8 et les versions antérieures.
MEM
1
Vous pouvez utiliser le polyfill Selectivzr si vous devez également prendre en charge IE8 ... et IE6 / 7.
Ricardo Zea
2
Je viens de confirmer que même avec Selectivizr :nth-child(odd/even)ne fonctionne pas dans IE8.
Ricardo Zea
7
Certes, cela ne fonctionne pas dans IE8 comme indiqué ici: caniuse.com/#feat=css-sel3 mais cela fonctionne sur tous les principaux navigateurs .
aaron-coding
1
Après tout, le support IE8 n'est plus à craindre dans ce cas, car le comportement souhaité est simplement «favorable». Il n'empêche pas l'utilisateur d'utiliser le site ni de trouver des informations. Cela ne gâche même pas (probablement pas) l'apparence générale du site Web.
Hafenkranich
47

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

Les pseudo-classes paires et impaires doivent être:

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

et

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

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

Kevin Gurney
la source
3 

li:nth-child(1n) { color:green; }
li:nth-child(2n) { color:red; }
<ul>
  <li>list element 1</li>
  <li>list element 2</li>
  <li>list element 3</li>
  <li>list element 4</li>
</ul>
Développer l'extrait

Voir le support du navigateur ici: CSS3: nth-child () Selector

iDaniel88
la source
1

le css impair et même n'est pas compatible avec IE. vous recommandons d'utiliser la solution ci-dessous.

Meilleure solution:

li:nth-child(2n+1) { color:green; } // for odd
li:nth-child(2n+2) { color:red; } // for even

li:nth-child(1n) { color:green; }
li:nth-child(2n) { color:red; }

<ul>
  <li>list element 1</li>
  <li>list element 2</li>
  <li>list element 3</li>
  <li>list element 4</li>
</ul>
Minh_Bu
la source
0

Ci-dessous, l'exemple de couleur CSS uniforme et impaire

<html>
<head>
<style> 
p:nth-child(even) {
    background: red;
}
p:nth-child(odd) {
    background: green;
}
</style>
</head>
<body>

<p>The first Odd.</p>
<p>The second Even.</p>
<p>The third Odd.</p>
<p>The fourth Even.</p>


</body>
</html>
Sheo Dayal Singh
la source
0

mais cela ne fonctionne pas dans IE. recommande d'utiliser: nième enfant (2n + 1): nième enfant (2n + 2)

li {
    color: black;
}
li:nth-child(odd) {
    color: #777;
}
li:nth-child(even) {
    color: blue;
}
<ul>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
</ul>
Développer l'extrait

Minh_Bu
la source
0

Le sélecteur: nth-child (n) correspond à chaque élément qui est le nième enfant, quel que soit le type, de son parent. Les mots pairs et impairs peuvent être utilisés pour faire correspondre des éléments enfants dont l'indice est impair ou pair (l'indice du premier enfant est 1).

Voici ce que tu veux:

<html>
    <head>
        <style>
            li { color: blue }<br>
            li:nth-child(even) { color:red }
            li:nth-child(odd) { color:green}
        </style>
    </head>
    <body>
        <ul>
            <li>ho</li>
            <li>ho</li>
            <li>ho</li>
            <li>ho</li>
            <li>ho</li>
        </ul>
    </body>
</html>
Agboola Feyikemi
la source
-5 
 <ul class="names" id="names_list">
          <a href="javascript:void(0);"><span class="badge">1</span><li class="part1" id="1">Ashwin Nair</li></a>
           <a href="javascript:void(0);"><span class="badge">2</span><li class="part2" id="2">Anil Reddy</li></a>
           <a href="javascript:void(0);"><span class="badge">0</span><li class="part1" id="3">Chirag</li></a>
           <a href="javascript:void(0);"><span class="badge">0</span><li class="part2" id="4">Ashwin</li></a>
           <a href="javascript:void(0);"><span class="badge">0</span><li class="part1" id="15">Ashwin</li></a>
            <a href="javascript:void(0);"><span class="badge">0</span><li class="part2" id="16">Ashwin</li></a>
           <a href="javascript:void(0);"><span class="badge">5</span><li class="part1" id="17">Ashwin</li></a>
           <a href="javascript:void(0);"><span class="badge">6</span><li class="part2" id="18">Ashwin</li></a>
           <a href="javascript:void(0);"><span class="badge">1</span><li class="part1" id="19">Ashwin</li></a>
           <a href="javascript:void(0);"><span class="badge">2</span><li class="part2" id="188">Anil Reddy</li></a>
           <a href="javascript:void(0);"><span class="badge">0</span><li class="part1" id="111">Bhavesh</li></a>
           <a href="javascript:void(0);"><span class="badge">0</span><li class="part2" id="122">Ashwin</li></a>
           <a href="javascript:void(0);"><span class="badge">0</span><li class="part1" id="133">Ashwin</li></a>
            <a href="javascript:void(0);"><span class="badge">0</span><li class="part2" id="144">Ashwin</li></a>
           <a href="javascript:void(0);"><span class="badge">5</span><li class="part1" id="199">Ashwin</li></a>
           <a href="javascript:void(0);"><span class="badge">6</span><li class="part2" id="156">Ashwin</li></a>
           <a href="javascript:void(0);"><span class="badge">1</span><li class="part1" id="174">Ashwin</li></a>

         </ul>    
$(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",
            });

            }

        });
Ashwin Vinod Krishnan
la source
3
C'est juste ... Horrible. Il y a tellement de meilleures façons de cibler les éléments pairs / impairs. De plus, il n'y a aucune raison d'utiliser JavaScript comme ceci lorsque deux lignes de CSS accompliraient la même chose.
Dustin Halstead