使用nth-child选择特定的div类

Question

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.

Answer 1

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 .