nth-child selector in jQuery

This fiddle goes along with this blog post: http://ryan.sadwick.com/nth-child/

by Prasad Gavande

HTML

<div id="group"> 
    <div class="item"> 
        first
    </div> 
    
    <div class="item"> second
        
    </div> 
    
    <div class="item"> 
        third
    </div> 
    
    <div class="item"> 
        fourth
    </div> 
    
    <div class="item"> 
        fifth
    </div> 
    
    <div class="item"> 
        sixth
    </div> 
    
    <div class="item"> 
        seventh
    </div> 
    
</div>

CSS

body {
    
}

ul
{
    list-style-type: none;
}

#group
{
    display: inline-block;
    width: 245px;
}

.item
{
    display: inline-block;
    margin-top: 12px;
    padding: 12px;
}

h3
{
    font-size: 16px;
}

JavaScript

window.setInterval(function(){
$(".item:nth-child(1)").css("color", "#000000");
}, 1000);
window.setInterval(function(){
$(".item:nth-child(2)").css("color", "#aababb");
}, 2000);
window.setInterval(function(){
$(".item:nth-child(3)").css("color", "#aaaaaa");
}, 3000);
window.setInterval(function(){
$(".item:nth-child(4)").css("color", "#bbbbbb");
}, 4000);
window.setInterval(function(){
$(".item:nth-child(5)").css("color", "#cccccc");
}, 5000);
window.setInterval(function(){
$(".item:nth-child(6)").css("color", "#dddddd");
}, 6000);
window.setInterval(function(){
$(".item:nth-child(7)").css("color", "#111111");
}, 7000);