Disegnare ogni 3 ° elemento di un elenco usando i CSS?

Question

È possibile per me personalizzare ogni 3 voci dell'elenco?

Attualmente nel mio div. 960px ho una lista di caselle a sinistra e visualizzate in una griglia 3x3. Hanno anche un margine di destra di 30px, ma poiché il terzo 6 ° e 9 ° elemento elenco ha questo margine li fa saltare una riga rendendo la griglia visualizzata erroneamente

Quanto è facile rendere il 3 ° e il 9 ° non avere il margine destro senza dover dare loro una classe diversa, o è l'unico modo per farlo?

Answer 1

Sì, è possibile utilizzare i cosiddetti selettori :nth-child.

In questo caso si usa:

li:nth-child(3n) { 
// Styling for every third element here. 
} 

: nth-child (3n):

3(0) = 0 
3(1) = 3 
3(2) = 6 
3(3) = 9 
3(4) = 12 

:nth-child() è compatibile in Chrome, Firefox e IE9 +.

Per aggirare utilizzare :nth-child() tra le altre pseudo-classi/selettori di attributo in IE6 sui IE8, see this link.

Answer 2

Prova questa

box:nth-child(3n) { 
    ... 
} 

DEMO

nth-child browser support

Answer 3

è possibile utilizzare il selettore di :nth-child per quella

li:nth-child(3n) { 
/* your rules here */ 
} 

Answer 4

:nth-child è la risposta che state cercando.