Question

I have a box of selectors all sharing the class. widgetContainer can hold 3 divs in a line before dropping into the next line. I’m using nth-child(3n+0) to take the margin off the right hand side of every 3rd div, allowing me to add more 10px more margin to the first 2 (this makes the divs fit exactly into the container).

But what I want to know is if there is a way to target the nth-child(3n+0) and remove the margin, but then target, as an example :not:nth-child(3n+0) to allow me to add the extra 10px margin on that? This allows me to keep my CSS the same and if the pseudo selector isn’t supported then it degrades well.

Let me show you my code:

HTML

<div class="widgetContainer">
    <div class="widgetBox">
        <dt>Title</dt>
        <dd>Lorem Ipsum..</dd>
    </div>
    <div class="widgetBox">
        <dt>Title</dt>
        <dd>Lorem Ipsum..</dd>
    </div>
    <div class="widgetBox">
        <dt>Title</dt>
        <dd>Lorem Ipsum..</dd>
    </div>
    <div class="widgetBox">
        <dt>Title</dt>
        <dd>Lorem Ipsum..</dd>
    </div>
    <div class="widgetBox">
        <dt>Title</dt>
        <dd>Lorem Ipsum..</dd>
    </div>
    <div class="widgetBox">
        <dt>Title</dt>
        <dd>Lorem Ipsum..</dd>
    </div>
</div>

CSS

.widgetBox {
    width: 300px;
    height: auto;
    float: left;
    margin: 30px 20px 10px 0;
    border: 3px solid #e4e4e4;
}
.widgetBox:nth-child(3n+0) {
    margin: 30px 0 10px 0;
}

On JSFiddle

What I can do with the CSS is make widgetBox have a margin of 30px 30px 10px 0, but this doesn’t work in browsers that do not support nth-child, it will force there to be 2 divs per row as the margin hasn’t been removed from the 3rd div.

Let me know if you need more clarification!

Note – I really would rather not use jQuery for this, but if it is a necessity, let me know and I’ll definitely consider using it!

Answer 1

There is no not selector..just add two more styles:

.widgetBox:nth-child(3n+1) {
    margin: 30px 30px 10px 0;
}

.widgetBox:nth-child(3n+2) {
    margin: 30px 30px 10px 0;
}