este problema se puede resolver de variadas formas, pero te mostramos la respuesta más completa en nuestra opinión.
Solución:
:nth-child() no funciona en clases, busca el elemento en sí. Necesitarías envolver el .container divs por un contenedor y use lo siguiente:
.wrapper div:nth-child(n+3)
/* put your styles here... */
Demostración de trabajo.
aclarando sobre :nth-child()
Usando .container:nth-child(n+3) puede o no funcionar. Porque, :nth-child() pseudo-clase representa nth elemento secundario que coincide con el selector (.container en este caso).
Si el .container elemento no es el enésimo niño de su padreno se seleccionará.
De la especificación:
los
:nth-child(an+b)notación de pseudo-clase representa un elemento que tienean+b-1hermanos antes en el árbol del documento, para cualquier entero positivo o valor cero deny tiene un elemento principal.
Considere este ejemplo:
1st
2nd
3rd
4th
5th
6th
7th
8th
9th
En este caso, .container:nth-child(2) no seleccionará el segundo div.container elemento (que tiene 5th contenido). Porque ese elemento no es el 2do hijo de su padre, en el árbol de hijos de los padres.
También, .container:nth-child(n+3) seleccionará todos los div.container elementos porque n comienza desde 0 para el primer elemento en el árbol de hijos del padre, y el primer div.container es el 4to hijo de su padre.
n starts from 0
n = 0: (0 + 3) = 3 => 3rd element
n = 1: (1 + 3) = 4 => 4th element
n = 2: (2 + 3) = 5 => 5th element
...
Por eso div.container:nth-child(n+3) representa todos los 3ro, 4to, 5to… elementos secundarios coincidentes div.container selector.
Demostración en línea.
CSS:
.wrapper div:nth-child(n+3) /* you style*/
Razón y explicación
(0+3) = 3 = 3rd Element
(1+3) = 4 = 4th Element
(2+3) = 5 = 5th Element and so on ... where n=0,1,2,3.....
Ejemplo en vivo >>
Pruebe el siguiente código. Aplicará estilos a todos .container clases excepto 1 y 2:
.container+.container~.container
/*styles*/
violín de demostración
Recuerda que puedes dar visibilidad a este post si lograste el éxito.