css nth-child y clases

Question

Tengo un problema con el selector css nth-child. Tengo una rejilla de 3x3 elemtens dentro de un contenedor. Esos elementos tienen una clase llamada .square. Con .square:nth-child(3n+1) selecciono cada primer elemento de la fila y lo coloreo en verde. Con .square:nth-child(3n+3) selecciono hasta el último elemento de la fila y lo coloreo en rojo.

Esto funciona bien, hasta que hay algún elemento (<br> por ejemplo) que se emite antes de la cuadrícula. Con cada nuevo <br>, el pedido sube en uno, como es el <br> se consideró .square.

Según tengo entendido, .nth-child, debe seleccionar cada tercer elemento de la clase .square. ¿Por qué se aplica a cualquier elemento y cómo puedo lograr mi objetivo inicial?

Gracias de antemano

http://www.hier-krieg-ich-alles.de/shop.php?cat=26491127728

El problema se produce en las cajas en el medio.

Answer 1

Parece que quiere nth-of-type.

Los selectores relacionados que pueden serle útiles son :first-of-type, :last-of-type, :nth-last-of-type y :only-of-type.

Answer 2

nth-child trabajar sólo con elemento html, css nth-child no sé class e id, si desea configurar nth-child para la clase, añadir un poco de atributo personalizado para esa clase usando jQuery ..

como

jQuery('.square:nth-child(3n+3)').attr("act","dummy"); 

entonces utilizar CSS

div[act='dummy']{ 
border : 1px solid red;}