JS: nthChild

discussion: http://stackoverflow.com/a/16757951/1250044

HTML

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>

CSS

li.odd {
    color: #f00;
}

li.even {
    color: #baa;
}

li.formula {
    background: yellow
}

JavaScript

var nthChild = function (elem, num) {
    var len = elem.length;
    var ret = [];
    var i = 0;
 
    // :nth-child(num)
    if (!isNaN(Number(num))) {
        for (i = 0; i < len; i++) {
            if (i === num - 1) return elem[i];
        }
    }
 
    // :nth-child(numn+num)
    if (num.indexOf('+') > 0) {
        var parts = num.match(/\w/g);
        for (i = parts[2] - 1; i < len; i += parts[0] << 0) {
            if (elem[i]) ret.push(elem[i]);
        }
    }
 
    // :nth-child(odd)
    if (num === 'odd') {
        for (i = 0; i < len; i += 2) {
            ret.push(elem[i]);
        }
    }
 
    // :nth-child(even)
    if (num === 'even') {
        for (i = 1; i < len; i += 2) {
            ret.push(elem[i]);
        }
    }
 
    return ret;
};


var rows = document.querySelectorAll('li');

var num = nthChild(rows, 2);
var formula = nthChild(rows, '3n+1');
var even = nthChild(rows, 'even');
var odd = nthChild(rows, 'odd');
 
 
// Note, forEach needs to be polyfilled for oldIE
even.forEach(function (li) {
    li.className += ' even';
});
 
odd.forEach(function (li) {
    li.className += 'odd';
});
 
formula.forEach(function (li) {
    li.className += ' formula';
});
 
num.style.backgroundColor = 'black';