Last Updated: September 09, 2019
·
1.616K
· stowball

Poor Man's nth-child for LT IE 9

As LT IE 9 doesn't support nth-child without Selectivzr (and Selectivzr can really slow down the rendering of a page - especially in SharePoint), I've written a Sass mixin to achieve the Poor Man's nth-child, which uses the sibling selector + to replicate.

It supports single (X), repeating (Xn), repeating starting from an index (Xn+Y / Xn-Y) and odd & even.

It's as simple as doing something like:

.nth > li:first-child {
    @include nth-child(3n, 'li', 20) {
        // style as required
    }
}

The mixin takes the following parameters:

  • $an - the counting method, eg: 2n, 3n, odd - default is 2n
  • $an can also be a list, with the 2nd parameter being the modifier, eg: 2 for ($an+2) or -3 for ($an-3)
  • $sibling - the sibling element selector, eg: 'li', 'div' - default is '*'
  • $count - how many sibling selectors to support, eg: 10, 20 - default is 15