How to make Internet Explorer 8 to support nth child() CSS element?

With polyfill : Selectivizr is good enough.

Without polyfill: As IE8 supports first-child you can trick this to support nth-child in iE8 i.e

/*li:nth-child(2)*/
li:first-child + li {}/*Works for IE8*/

Although we cannot emulate complex selectors i.e nth-child(2n+1) or nth-child(odd) for IE8.

As an alternative to Selectivizr, you can use a little jQuery:

$('.your-list li:nth-child(3n+1)').addClass('nth-child-3np1');

Then just add a second selector in your CSS:

:nth-child(3n+1)
{
    clear: both;
}

.nth-child-3np1
{
    clear: both;
}

Related