Using nth-child by Ryan Sadwick

This fiddle is part of this blog post: http://ryan.sadwick.com/nth-child/

by rsadwick

HTML

<html> 
    <body> 
        <h3>List 1</h3> 
        <ul> 
            <li><img src="http://ryan.sadwick.com/external/nth_child/images/img1.png"/></li> 
            <li><img src="http://ryan.sadwick.com/external/nth_child/images/img2.png"/></li> 
            <li><img src="http://ryan.sadwick.com/external/nth_child/images/img3.png"/></li> 
            <li><img src="http://ryan.sadwick.com/external/nth_child/images/img4.png"/></li> 
            <li><img src="http://ryan.sadwick.com/external/nth_child/images/img5.png"/></li> 
        </ul> 
        
        <h3>List 2</h3> 
        <ul> 
            <li><img src="http://ryan.sadwick.com/external/nth_child/images/img10.png"/></li>
            <li><img src="http://ryan.sadwick.com/external/nth_child/images/img11.png"/></li>
            <li><img src="http://ryan.sadwick.com/external/nth_child/images/img12.png"/></li>
            <li><img src="http://ryan.sadwick.com/external/nth_child/images/img13.png"/></li>
            <li><img src="http://ryan.sadwick.com/external/nth_child/images/img14.png"/></li>
        </ul> 
        
        
    </body> 
</html>

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

$(document).ready(function() {
    //Color only the second item in each list:
    $("li:nth-child(2)").css("background-color", "#ffcc99");

});