Selectors/API/jQuery
:nth-child(index/even/odd/equation)
各親要素に対してn番目の子要素を抽出します。
n番目だけでなく、n個おき、偶数、奇数などの指定も可能です。
:eq(index)が要素をひとつだけ返すのに対して、:nth-childは親要素毎の抽出を行うので結果として複数の要素を取ることができます。奇数、偶数などの指定に関しても同様です。
:eq()がゼロから始まる番号を取るのに対し、:nth-childでは1から始まる番号になるので注意してください。
n番目だけでなく、n個おき、偶数、奇数などの指定も可能です。
:eq(index)が要素をひとつだけ返すのに対して、:nth-childは親要素毎の抽出を行うので結果として複数の要素を取ることができます。奇数、偶数などの指定に関しても同様です。
:eq()がゼロから始まる番号を取るのに対し、:nth-childでは1から始まる番号になるので注意してください。
サンプル
サンプル1
各ul要素の、2番目のli要素を黄色くします。真ん中のul要素には2番目が存在しない(:nth-childではゼロからではなく1から始まる番号を使用します)ので、何も取得されません。
<div><ul> <li>John</li> <li>Karl</li> <li>Brandon</li> </ul></div> <div><ul> <li>Sam</li> </ul></div> <div><ul> <li>Glen</li> <li>Tane</li> <li>Ralph</li> <li>David</li> </ul></div>
$("ul li:nth-child(2)").css("background-color", "yellow");
[全コードを表示]
[実行結果を単体で表示]
サンプル2
なお、ここで:nth-childのかわりに:eqを用いると、次のようになります。
インデックスがゼロから始まるので1つずれることもありますが、:nth-childが「各親要素の2番目」であるのに対して、:eqが「該当する要素集合の2番目」であることがわかるでしょうか。
インデックスがゼロから始まるので1つずれることもありますが、:nth-childが「各親要素の2番目」であるのに対して、:eqが「該当する要素集合の2番目」であることがわかるでしょうか。
$("ul li:eq(2)").css("background-color", "yellow");
[全コードを表示]
[実行結果を単体で表示]
サンプル3
こちらは、各ボタンに書かれたテキストをセレクターとして対象の要素をハイライトさせるサンプルです。
:nth-childの挙動に加えて、例えば:nth-child(even)と:evenの動作の違いなども判るかと思います。
:nth-childの挙動に加えて、例えば:nth-child(even)と:evenの動作の違いなども判るかと思います。
$("button").click(function () { var str = $(this).text(); $("tr").css("background", "white"); $("tr" + str).css("background", "#e2e1fb"); $("#inner").text(str); });
[全コードを表示]
[実行結果を単体で表示]