How would this nth-child selector work in IE 8?

Question

This is my div container:

#randomid { 
margin-right:40px;
margin-bottom:35px; 
float:left;
} 

And there are 12 elements inside (in 2 rows). And I need to remove the margin-right from the far right ones (every sixth).

So I got this pseudo selector:

#randomid:nth-child(6n+6) {
    margin-right: 0; 
}

How can I make this work in IE 8 without using javascript?

Answer 1

Instead of using such a complex CSS-selector, with the drawbacks of lacking support in older browsers, there are possible workarounds to look into. I've put together a small example of how you can achieve what I believe is the desired result, without using the selector.

Below example will have six elements on each row, with a margin separating each element, but without a margin before the first element or after the last element on each row.

Markup:

<div class="foo">
    <div class="bar">A</div>
    <div class="bar">A</div>
    <div class="bar">A</div>
    <div class="bar">A</div>
    <div class="bar">A</div>
    <div class="bar">A</div>
    <div class="bar">A</div>
    <div class="bar">A</div>
    <div class="bar">A</div>
    <div class="bar">A</div>
    <div class="bar">A</div>
    <div class="bar">A</div>
    <div class="clear"></div>
</div>

CSS:

.foo {
    background-color: #ccc;
    width: 180px;
    margin: 0 -10px;
}

.bar {
    background-color: #888;
    float: left;
    margin-left: 10px;
    width: 20px;
}

.clear {
    clear: both;
}

Live example

It might not be exactly what you want, but it will at least work as a starting point for you to adapt and develop further.

Update:

There are better ways to clear the float, that could be used instead of an extra element as used in my example (I used it just for simplicity). If interested, here is an SO question on that.