Skip to content

Instantly share code, notes, and snippets.

@stowball
Last active December 18, 2015 01:29
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save stowball/5704507 to your computer and use it in GitHub Desktop.
Save stowball/5704507 to your computer and use it in GitHub Desktop.
Poor man's nth-child mixin for LT IE9. It supports single (X), repeating (Xn), repeating starting from an index (Xn+Y / Xn-Y) and odd & even. View a live demo here: http://codepen.io/stowball/pen/GxlIc
.selected {
background: #000;
color: #fff;
}
.even > li:first-child {
@include nth-child(even, 'li') {
@extend .selected;
}
}
.odd > li:first-child {
@include nth-child(odd, 'li') {
@extend .selected;
}
}
.x3n > li:first-child {
@include nth-child(3n, 'li') {
@extend .selected;
}
}
.x3n2 > li:first-child {
@include nth-child((3n, 2), 'li') {
@extend .selected;
}
}
.x3n-2 > li:first-child {
@include nth-child((3n, -2), 'li') {
@extend .selected;
}
}
.x1n4 > li {
@include nth-child((1n, 4), 'li') {
@extend .selected;
}
}
.x5 > li:first-child {
@include nth-child(5, 'li') {
@extend .selected;
}
}
@function strip-units($number) {
@return $number / ($number * 0 + 1);
}
@mixin nth-child($an: 2n, $sibling: '*', $count: 15) {
$index: '';
$n: false;
$selector: '';
$modifier: 0;
@if (type-of($an) == list) {
$index: nth($an, 1);
$modifier: nth($an, 2);
}
@else {
$index: $an;
}
@if ($index == 'even' or $index == even) {
$index: 2n;
}
@if ($index == 'odd' or $index == odd) {
$index: 2n;
$modifier: 1;
}
@if (unit($index) == 'n') {
$index: strip-units($index);
$n: true;
}
@if ($modifier < 0) {
@if (abs($modifier) > $index){
$modifier: -(abs($modifier) % floor($index));
}
$modifier: $modifier + floor($index);
}
@if ($index > 0) {
@if ($n == false) {
$count: 1;
}
@if ($index == 1) {
$selector: '&:first-child';
}
@if ($modifier > 1) {
@for $j from 0 to $modifier - 1 {
$selector: $selector + '+ ' + $sibling;
}
$selector: $selector + ',';
}
@for $i from 1 to $count + 1 {
@if ($i > 1) {
$selector: $selector + ', ';
}
@for $x from (1 - $modifier) to $index * $i {
$selector: $selector + '+ ' + $sibling;
}
}
}
@if ($index > 0) {
@if ($modifier == 1) {
@content;
}
#{$selector} {
@content;
}
}
}
nth-child($an: 2n, $sibling: '*', $count: 15)
$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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment