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/