Styling cada 3er elemento de una lista usando CSS? [duplicar]

Esta pregunta ya tiene una respuesta aquí:

¿Es posible para mí estilizar cada elemento de la 3ra lista?

Actualmente en mi 960px div ancho tengo una lista de cajas que flotan a la izquierda y se muestran en una vista de cuadrícula de 3x3. También tienen un margen derecho de 30px, pero debido a la 3ª 6ª y 9ª lista item tiene este margen que les hace saltar por una fila haciendo que la cuadrícula se muestre incorrectamente

¿Qué tan fácil es hacer que la 3ª 6ª y la 9ª no tengan el margen-derecho sin tener que darles una clase diferente, o es esa la única manera de hacerlo?

 55
html5css3
Author: lifetimes, 2012-12-04
Source

4 answers

Sí, puedes usar lo que se conoce como :nth-child selectores.

En este caso usarías: 

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

:nth-niño (3n):

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

:nth-child() es compatible con Chrome, Firefox e IE9+.

Para un trabajo alrededor de usar :nth-child() entre otros selectores de pseudo-clases/atributos en IE6 hasta IE8, vea este enlace.

 148
Author: lifetimes,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-03-31 15:26:48

Puede utilizar el :nth-child selector para que

li:nth-child(3n) {
 /* your rules here */
}
 7
Author: Sirko,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-07-16 20:20:20

Prueba esto

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

DEMO

nth-child soporte del navegador

 4
Author: Zoltan Toth,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-12-03 21:14:17

:nth-child es la respuesta que estás buscando.

 1
Author: hienbt88,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-12-04 14:18:33