Selectivizr.js won't work in respond.js

Question

I'm using Respond.js so that I can create a responsive page in IE8. And it works fine.

But, I am also using Selectivizr.js so that I can use CSS3 :nth-child selector in IE8, which also works fine.

The problem is that the nth-child selector won't work if it is in a responsive point.

For example, this won't work:

@media screen and (min-width:980px){

    .center_crni_linkovi a:nth-child(4n){
        margin:10px 0px 10px 10px;
    }

    .center_crni_linkovi a:nth-child(4n+1){
       margin:10px 10px 10px 0;
    }

}

But if I put the style outside the responsive point, it works fine. But then I can't use a specific style for this specific responsive point.

How to make it work ?

Answer 1

A little late to the party, but if anyone else stumbles across this problem. It is a known issue with the current stable release of selectivizr when combined with respond.js. Use the latest build of selectivizr found here: https://github.com/keithclark/selectivizr/blob/master/selectivizr.js

Ensure you're loading selectivizr before respond.js and this should fix the issue.

Update:

see also this: selectivizr2: Selectivizr with maintenance (more up to date)