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?

@ChristoferEliasson don't you see `6n+6` he used it bcoz he does not want to ;) — Muhammad Talha Akbar, Feb 12 '13 at 15:52
I don't know @Jean and everyone recommend http://www.selectivizr.com/ or alternatively sibling selector `+` which i think you do not want. — Muhammad Talha Akbar, Feb 12 '13 at 15:53
Why are you combining `:nth-child(6n+6)` with an ID selector anyway? — BoltClock, Feb 12 '13 at 15:55
@AspiringAqib Well I understand that, but if you need make such a complex selection, have IE8 support and don't want to use JavaScript, then I'm afraid that's the way you have to go - or some other requirement have to give. — Christofer Eliasson, Feb 12 '13 at 15:56
@BoltClock niceone! Jean you should rather use classes instead of IDs. — Muhammad Talha Akbar, Feb 12 '13 at 15:57
related to : http://stackoverflow.com/questions/8492121/ie8-nth-child-and-before and http://stackoverflow.com/questions/10577674/how-to-make-internet-explorer-8-to-support-nth-child-css-element — Milche Patern, Feb 12 '13 at 15:59
@ChristoferEliasson @BoltClock♦ This is the id of 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). — Jean, Feb 12 '13 at 16:02
@Jean I believe you could solve that without using such a complex selector. See my newly added answer. — Christofer Eliasson, Feb 12 '13 at 16:25

score 2 · Answer 1 · answered Feb 12 '13 at 16:00

You can use selectivizr. It is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8. Simply include the script in your pages and selectivizr will do the rest.

http://selectivizr.com/

Alternately

You can use first-child and “+” to emulate nth-child, example:

tr>td:first-child + td + td + td + td + td + td + td + td{background-color:red}

that select the 9th column, just like nth-child(9), and that works on IE

score 2 · Accepted Answer · edited May 23 '17 at 12:27

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.

score 0 · Answer 3 · answered Dec 03 '13 at 14:49

There is actually a nice trick that will make this work totally cross browser.

Give your containing container such a width that you would fit all child elements inside despite the margin on the last element to the right, e.g.

#randomidContainer { 
    width: 840px;
}

Then you just wrap that container into another one, that you use to do the trick which goes for example like this:

#randomidOuterContainer { 
    width: 800px;
    border: 1px solid #000;
    overfliw: hidden;
}

This will (sort of) magically make your inner floated elements go nicely on one line despite having that extra margin on the right that might not fit your pixel perfect layout.

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

3 Answers3