CODEWITHSUNDEEP
htmlcss
StuyvesantBlue
StuyvesantBlue

Reputation: 145

Select specific div class using nth-child

Please have a look at http://jsfiddle.net/kV7Uq/1/

.productList div.grid:nth-child(4n+5){
clear:left;
}

What I'm trying to achieve is to create a 4 column grid. The above code used in the fiddle seems to be just fine - but if you look at that fiddle there is no 4 column grid.

<div class="pageNav"></div>
<div class="pageHeading"></div>

The above two divs that are also child divs of the container div, and located prior to the grid divs are causing a conflict. If those two divs are removed, the grid comes out just fine. I'm not sure if this is even fixable, please help - thank you.

Upvotes: 0

Views: 58

Answers (1)

James Montagne
James Montagne

Reputation: 78650

Just offset it by 2 to compensate for those divs. Instead of +5, use +3.

.productList div.grid:nth-child(4n+3){
    clear:left;
}

http://jsfiddle.net/kV7Uq/2/

If you don't want the very first box to have the clear: left then it would be +7.

Upvotes: 1

Related Questions