css nth-child и классы

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

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

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

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

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

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