css nth child и классы

Question

У меня проблема с селектором css nth-child.У меня есть сетка 3х3 элемента внутри контейнера.Эти элементы имеют класс .square.С помощью .square:nth-child(3n+1) я выбираю каждый первый элемент строки и окрашиваю его в зеленый цвет.С помощью .square:nth-child(3n+3) я выбираю каждый последний элемент строки и окрашиваю его в красный цвет.

Это работает нормально, пока не будет какой-либо элемент (например, <br>), который выводится перед сеткой.С каждым новым <br> порядок увеличивается на единицу, так как <br> считался .square.

Как я понимаю .nth-child, он должен выбирать каждый третий элемент .square класс.Почему это применимо к любому элементу и как я могу достичь своей первоначальной цели?

Заранее спасибо

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

Проблема возникает на коробках посередине.

Answer 1

Звучит так, как вы хотите nth-of-type.

Связанные селекторы, которые вы можете найти полезными: :first-of-type, :last-of-type, :nth-last-of-type и :only-of-type.

Answer 2

nth-child работает только с элементом html, nth-child css не знает class и id, если вы хотите установить nth-child для класса, добавьте некоторый пользовательский атрибут для этого класса, используя jquery ..

как

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

затем используйте css

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