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
- You can see a live example on CodePen: http://codepen.io/stowball/pen/GxlIc
- Grab the code in my gist: https://gist.github.com/stowball/5704507
- Or get it as part of my Sass UI framework, Suzi: https://github.com/izilla/Suzi/
Written by Matt Stow
Related protips
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Css
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#