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

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

this div container:

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

and there 12 elements within (in 2 rows). , need remove margin-right far right ones (every sixth).

so got pseudo selector:

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

how can create work in ie 8 without using javascript?

instead of using such complex css-selector, drawbacks of lacking back upwards in older browsers, there possible workarounds into. i've set little illustration of how can accomplish believe desired result, without using selector.

below illustration have 6 elements on each row, margin separating each element, without margin before first element or after lastly 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 want, @ to the lowest degree work starting point adapt , develop further.

update:

there improve ways clear float, used instead of element used in illustration (i used simplicity). if interested, here so question on that.

css internet-explorer-8 pseudo-class css-selectors