Child Filter(子要素フィルタ)

HTML

<h2 class="clear">:first-child</h2>

<ul class="first">
    <li>list0</li>
    <li>list1</li>
    <li>list2</li>
</ul>
<ul class="first">
    <li>list3</li>
    <li>list4</li>
    <li>list5</li>
</ul>

<h2 class="clear">:last-child</h2>

<ul class="last">
    <li>list0</li>
    <li>list1</li>
    <li>list2</li>
</ul>
<ul class="last">
    <li>list3</li>
    <li>list4</li>
    <li>list5</li>
</ul>

<h2 class="clear">:nth-child</h2>

<ul class="nth">
    <li>list0</li>
    <li>list1</li>
    <li>list2</li>
    <li>list3</li>
    <li>list4</li>
</ul>
<ul class="nth">
    <li>list5</li>
    <li>list6</li>
    <li>list7</li>
    <li>list8</li>
    <li>list9</li>
</ul>

<h2 class="clear">:only-child</h2>

<ul class="only">
    <li>list0</li>
    <li>list1</li>
    <li><span>list2</span></li>
    <li><span>list3</span></li>
    <li>list4</li>
</ul>
<ul class="only">
    <li>list5</li>
    <li>list6</li>
    <li>list7</li>
    <li>list8</li>
    <li><span>list9</span></li>
</ul>

CSS

.clear{clear:both;}
h2{padding:15px 0 5px 10px;
   font-size:20px;
    color:blue;
    border-top:1px solid #eee;
}

ul{margin:15px;}
li{padding:2px 0;}

JavaScript

$(function(){
    


/* :first-child */
//ul liのうちの、親要素毎の最初のliを赤くする
 $("ul.first li:first-child").css("color", "red");

/* :last-child */
//ul liのうちの、親要素毎の最初のliを赤くする
 $("ul.last li:last-child").css("color", "red");

  
/* :nth-child */  
//ul liのうちの、親要素毎の3番目のliを赤くする
 $("ul.nth li:nth-child(3)").css("color", "red");

/* :only-child */  
//ul liのうちの、spanのあるliを赤くする
 $("ul.only li span:only-child").css("color", "red");
    
    
//end    
});