Selezionare raddoppia con nth-child() in CSS3

Dire che ho la seguente struttura per una lista:Selezionare raddoppia con nth-child() in CSS3

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

ed ogni <li> è la larghezza del 50% quindi voglio ogni due per avere lo stesso colore di sfondo come questo :

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

Posso fare questo con il 'nth-child) (' selettore CSS in modo da ridurre al minimo il codice ?

fonte

2012-03-28 Dan

Perché non utilizzare un tavolo perché sembra che sia quello che stai facendo la lista si comportano comunque? – jzworkman

Non sono in realtà il 50% ma impostano le larghezze, era solo per impostare la scena. Le tabelle sono brutte, preferisco il design senza tavolo. – Dan

Tuttavia, il tuo elenco apparirà come un tavolo quando hai colori alternati, sembra solo contraddire il tuo design senza tavolo quando la tua implementazione lo farà sembrare comunque un tavolo. – jzworkman

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; 
}

Questo vi darà ogni 4 elemento di partenza con il 1 °, 2 ° e come #ccc colore e ogni 4 elemento di partenza con il 3 ° e 4 ° come #DDD

jsfiddle qui: http://jsfiddle.net/mU2tn/1/

fonte

2012-03-28 17:45:57 jzworkman

Perfetto! È sufficiente impostare il li predefinito come un colore, quindi cambiare solo il 3 ° e il 4 ° quindi anche meno css :) – Dan

Contento di aver potuto aiutare. – jzworkman

Fiddle aggiornato così gli elementi 'li' float: http://jsfiddle.net/BoltClock/mU2tn/2 – BoltClock

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

fonte

2012-03-28 17:45:52 YMMD

Sì, puoi farlo solo con CSS (3). Ecco uno jsFiddle example.

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; 
}

fonte

2012-03-28 17:46:37 j08691

Credo che questo CSS dovrebbe ottenere ciò che si mira a fare.

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; 
}

Questo JSFiddle lo mostra in azione. http://jsfiddle.net/u2W84/

fonte

2012-03-28 17:47:09 dangerChihuahua007

Forse tutte le altre risposte lavorare, ma questo è quello che farei:

ul li { 
    background: red; 
} 

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

Edit: non mi dispiace, che non ha funzionato: P Dammi un secondo.

fonte

2012-03-28 17:49:10 powerbuoy

Fondamentalmente funziona in modo simile a 'ul li: nth-child (dispari), ul li: nth-child (even)', che li seleziona tutti e sovrascrive 'ul li' completamente. – BoltClock

Hai ragione, non ti sei reso conto all'inizio che ': nth-child (dispari) + li' influenza _all_' li' elementi dopo uno strano, non solo il primo. – powerbuoy

O meglio, influenza l'elemento 'li' dopo * tutti quelli dispari *. Il selettore che prende tutti gli elementi che vengono dopo l'altro è '~'. – BoltClock

Selezionare raddoppia con nth-child() in CSS3

risposta

Problemi correlati