¿Cómo puedo diseñar elementos pares e impares?

281

¿Es posible usar pseudo-clases CSS para seleccionar instancias pares e impares de elementos de la lista?

Esperaría que lo siguiente produzca una lista de colores alternos, pero en cambio obtengo una lista de elementos azules:

<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
fuente

Respuestas:

630

Demostración: 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>
Expandir fragmento

Documentación:

Thirtydot
fuente
33
Quizás solo una nota: nth-child no es compatible con IE 8 y versiones inferiores.
MEM
1
Puede usar el polyfill Selectivzr si necesita admitir IE8 ... e IE6 / 7 también.
Ricardo Zea
2
Acabo de confirmar que incluso con Selectivizr :nth-child(odd/even)no funciona en IE8.
Ricardo Zea
77
Es cierto que no funciona en IE8 como se documenta aquí: caniuse.com/#feat=css-sel3 pero funciona en todos los principales navegadores .
codificación aaron
1
Después de todo, el soporte de IE8 ya no es motivo de preocupación en este caso, ya que el comportamiento previsto es simplemente "de apoyo". No impide que el usuario use el sitio ni encuentre información. Ni siquiera (muy probablemente no) estropea la apariencia general del sitio web.
Hafenkranich
47

El problema con su CSS radica en la sintaxis de sus pseudo-clases.

Las pseudo-clases pares e impares deberían ser:

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

y

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

Demostración: http://jsfiddle.net/q76qS/5/

Kevin Gurney
fuente
18

Utilizar este:

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

Consulte aquí para obtener información sobre la compatibilidad del navegador: http://kimblim.dk/css-tests/selectors/

Dan S
fuente
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>
Expandir fragmento

Consulte el soporte del navegador aquí: CSS3: nth-child () Selector

iDaniel88
fuente
1

el css impar e incluso no es compatible con IE. Te recomiendo usar la solución a continuación.

Mejor solución:

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
fuente
0

A continuación se muestra el ejemplo de color css par e impar.

<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
fuente
0

pero no funciona en IE. se recomienda usar: nth-child (2n + 1): nth-child (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>
Expandir fragmento

Minh_Bu
fuente
0

El selector: nth-child (n) coincide con cada elemento que es el enésimo hijo, independientemente del tipo, de su padre. Par e impar son palabras clave que se pueden usar para unir elementos secundarios cuyo índice es impar o par (el índice del primer niño es 1).

Esto es lo que quieres:

<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
fuente
-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
fuente
3
Esto es simplemente ... horrible. Hay muchas maneras mejores de apuntar a elementos pares / impares. Además, no hay razón para usar JavaScript de esta manera cuando dos líneas de CSS lograrían lo mismo.
Dustin Halstead