Geek Answers Handbook

Css nth-child and classes

I have a problem with the nss-css css selector. I have a grid of 3x3 elements inside a container. These elements have a class called .square. With the help of .square:nth-child(3n+1)I select every first element of the line and color it green. With the help of .square:nth-child(3n+3)I select every last element of the row and color it in red.

This works fine until you see some element (for example <br>) that appears in front of the grid. With each new <br>order is shifted by one, as a <br>was considered .square.

As I understand it .nth-child, he should choose every third element of the class .square. Why is this applicable to any element and how can I achieve my main goal?

Thanks in advance

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

The problem arises in the middle of the drawers.

+5
source share
2 answers

Sounds like you want to nth-of-type.

Related selectors that can be useful, it's :first-of-type, :last-of-type, :nth-last-of-typeand :only-of-type.

+8
source

nth-child, working only with the html element, nth-child css does not know the class and identifier, if you want to set nth-child for the class, add some custom attribute for this class using jquery ..

as

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

then use css

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

More articles:


All Articles