:nth-child demo

by Annie Lagang

HTML

<ul>
    <li id="item1">1</li>
    <li id="item2">2</li>
    <li id="item3">3</li>
    <li id="item4">4</li>
    <li id="item5">5</li>
    <li id="item6">6</li>
    <li id="item7">7</li>
    <li id="item8">8</li>
    <li id="item9">9</li>
    <li id="item10">10</li>
    <li id="item11">11</li>
    <li id="item12">12</li>
    <li id="item13">13</li>
    <li id="item14">14</li>
    <li id="item15">15</li>
    <li id="item16">16</li>
</ul>

CSS

li { color: red; }

JavaScript

/*$('li').filter(function() {return this.id.match(/[02468]$/);}).css('color', 'red')

$('li').filter(function() {return $(this).attr("id").match(/[13579]$/);}).css('color', 'blue')*/

// evens are red; odds are blue
// $('li').filter(":odd").css('color', 'blue');

// odds are red; evens are blue
// $('li').filter(":even").css('color', 'blue');

// another version
// $('li').filter(":nth-child(odd)").css('color', 'blue');
// another version
$('li').filter(":nth-child(even)").css('color', 'blue');