Web制作の現場で使えるjQuery　UIデザイン入門 ― 第3回

初めてのjQuery：セレクターAPIを一挙解説（前編） (6/6)

■nth-child擬似クラス

　特定のセレクターから指定した番号の要素だけを指定できるのが「nth-child擬似クラス」です。セレクターの後ろに :nth-child(番号) と記述します。

▼サンプルコード（HTML部分）

<ul>
    <li>テキストテキストテキストテキストテキスト</li>
    <li>テキストテキストテキストテキストテキスト</li>
    <li>テキストテキストテキストテキストテキスト</li>
    <li>テキストテキストテキストテキストテキスト</li>
</ul>

▼サンプルコード（スクリプト部分）

$(function(){
    $("li:nth-child(3)").css("color","red");
})

▼実行結果（実際のWebページ）

　3番目のli要素だけが赤色になります。

　nth-child擬似クラスは、$("li:nth-child(even)") で偶数番目のli要素を、$("li:nth-child(odd)") で奇数番目のli要素を指定できます。また、$("li:nth-child(3n)") と記述することで、3の倍数番目の要素を指定できます。

■last-child擬似クラス

　特定のセレクターの中で最後の要素だけを指定できるのが「last-child擬似クラス」です。セレクターの後ろに :last-child と記述します。

▼サンプルコード（HTML部分）

<ul>
    <li>テキストテキストテキストテキストテキスト</li>
    <li>テキストテキストテキストテキストテキスト</li>
    <li>テキストテキストテキストテキストテキスト</li>
    <li>テキストテキストテキストテキストテキスト</li>
</ul>

▼サンプルコード（スクリプト部分）

$(function(){
    $("li:last-child").css("color","red");
})

▼実行結果（実際のWebページ）

　最後のli要素（ここでは4番目のli要素）だけが赤色になります。

■only-child擬似クラス

　セレクターの中に特定の要素が1つだけ含まれる場合、その要素を指定できます。セレクターの後ろに :only-child と記述します。

▼サンプルコード（HTML部分）

<ul>
<ul>
    <li><span>テキスト</span>テキストテキストテキストテキスト</li>
    <li><span>テキスト</span>テキスト<span>テキスト</span>テキストテキスト</li>
    <li>テキストテキストテキストテキストテキスト</li>
    <li>テキストテキストテキストテキストテキスト</li>
</ul>

▼サンプルコード（スクリプト部分）

$(function(){
    $("li span:only-child").css("color","red");
})

▼実行結果（実際のWebページ）

　1行目のspan要素だけが赤色になります。2行目のli要素にはspan要素が複数含まれるため、色は変わりません。

---

（後編に続きます）