html - temporada - Seleccionar dobles usando nth-child() en CSS3

twin peaks serie critica

Question

Supongamos que tengo la siguiente estructura para una lista:

<ul>
    <li></li><li></li>
    <li></li><li></li>
</ul>

y cada <li> tiene un ancho del 50%, así que quiero que cada dos tengan el mismo color de fondo como este:

<ul>
    <li style="background:#CCC;"></li><li style="background:#CCC;"></li>
    <li style="background:#DDD;"></li><li style="background:#DDD;"></li>
    <li style="background:#CCC;"></li><li style="background:#CCC;"></li>
    <li style="background:#DDD;"></li><li style="background:#DDD;"></li>
</ul>

¿Puedo hacer esto usando el selector de CSS ''nth-child ()'' para minimizar el código ?

Answer 1

Creo que este CSS debería tener lo que pretendes hacer.

ul li:nth-child(4n+1), ul li:nth-child(4n+2) {
    background: #ccc;
}

ul li:nth-child(4n+3), ul li:nth-child(4n){
    background: #ddd;
}

Este JSFiddle lo muestra en acción. http://jsfiddle.net/u2W84/

Answer 2

Quizás todas las demás respuestas funcionen, pero esto es lo que haría:

ul li {
    background: red;
}

ul li:nth-child(odd), 
ul li:nth-child(odd) + li {
    background: green;
}

Editar: no lo siento, eso no funcionó: P Dame un segundo.

Answer 3

Sí, puedes hacerlo solo con CSS (3). Aquí hay un ejemplo jsFiddle .

li {
    width:100%;
}
li:nth-child(4n) {
    background:#999;
}
li:nth-child(4n-1) {
    background:#999;
}
li:nth-child(4n-2) {
    background:#ccc;
}
li:nth-child(4n-3) {
    background:#ccc;
}

1.

Answer 4

li{
   /* All LIs*/
}
li:nth-child(4n+1),
li:nth-child(4n+2) {
   /* Li 1, 2,
         5, 6,
         9, 10 */
}

Answer 5

ul li:nth-child(4n+1),
ul li:nth-child(4n+2) {
  background: #CCC;
}
ul li:nth-child(4n+3),
ul li:nth-child(4n+4) {
  background: #DDD;
}

Esto le dará cada 4º elemento comenzando con 1º y 2º color #CCC y cada 4º elemento empezando con 3º y 4º como #DDD

jsfiddle aquí: http://jsfiddle.net/mU2tn/1/