:nth-child(index/even/odd/equation)

マッチした要素のうち、それぞれの親要素に対する指定されたインデックスの子要素を返します。

記法

:eq(index)は要素集合全体に対する、指定されたインデックス番号の要素を返します。よって、返す要素の数は0もしくは1です。
また、インデックス番号は0から始まります。

:nth-child(index)は要素集合にある要素のうち、それぞれの親要素に対する、指定されたインデックス番号の要素を返します。よって、返す要素の数は0以上です。
また、インデックス番号は1から始まります。

記述例

// :nth-childのインデックス番号は1から始まる
:nth-child(3)     // 3番目の子要素
:nth-child(even)  // 偶数番目の子要素
:nth-child(odd)   // 奇数番目の子要素
:nth-child(5n)    // 5の倍数番目の子要素

例

// 背景色クリア
function clearBackgroundColor() {
    $("#test_result *").css("background-color", "");
}

例1:id属性が"block-"で始まる"div"要素の子孫要素のうち、親要素の2番目の子要素の背景を黄色にします。

clearBackgroundColor();
$("div[id^=block-] :nth-child(2)").css("background-color", "yellow");

例2:id属性が"block-"で始まる"div"要素の子孫要素うち、親要素の偶数番目の子要素の背景を黄色にします。

clearBackgroundColor();
$("div[id^=block-] :nth-child(even)").css("background-color", "yellow");

例3:id属性が"block-"で始まる"div"要素の子孫要素うち、親要素の3の倍数番目の子要素の背景を黄色にします。

clearBackgroundColor();
$("div[id^=block-] :nth-child(3n)").css("background-color", "yellow");


<div id="block-a">
    <span>block-a で 1 番目の 要素</span> <p>block-a で 2 番目の 要素</p>
    <span>block-a で 3 番目の 要素</span>
    <span>block-a で 4 番目の 要素</span>
    <span>block-a で 5 番目の 要素</span>
    <span>block-a で 6 番目の 要素</span>
</div>
    <div id="block-b">
    <span>block-b で 1 番目の 要素</span>
</div>
    <div id="block-c"> <p>block-c で 1 番目の 要素</p>
    <span>block-c で 2 番目の 要素</span>
    <span>block-c で 3 番目の 要素</span>
        <div id="inner-a">block-c で 4 番目の 要素     <p>inner-a で 1 番目の 要素</p>
        <span>inner-a で 2 番目の 要素</span>
    </div>
</div>

解説

記法

:eq(index)と:nth-child(index)の違い

記述例

例