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
source

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:

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
http://caniuse.com/css-sel3 (cela fonctionne presque partout)

— thirtydot
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
source

18

Utilisez ceci:

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

Voir ici pour plus d'informations sur la prise en charge du navigateur: http://kimblim.dk/css-tests/selectors/

— Dan S
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
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
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
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
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
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
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