jQuery :nth-child() セレクタ

❮ jQuery Selectors

その親の 3 番目の子である、各 <p> 要素を選択する:

$("p:nth-child(3)")
Try it Yourself »

定義と用法

:nth-child(n) セレクタは、親のタイプに関係なく、n 番目の子であるすべての要素を選択します。

チップ: 親の特定なタイプn 番目の子である全ての要素を選択するには、 :nth-of-type() セレクタを使用します。


構文

:nth-child(n|even|odd|formula)

パラメータ 説明
n それぞれの子にマッチさせるためのインデクス。

数値でなければならない。先頭の要素のインデクス番号は 1。
even 偶数番目の子要素を選択する
odd 奇数番目の子要素を選択する
formula 式(an + b)で選択された子要素を指定する。
例:p:nth-child(3n+2) は、2 番目の子要素から開始して、それぞれ 3 番目のパラグラフを選択します

Try it Yourself - 例

全 <div> 要素の 2 番目の子である各 <p> 要素を選択
全 <div> 要素の 2番目の子である各 <p> 要素を選択する方法。

式(an + b)の使用
いろいろな子要素を選択するために、式(an + b)を使用する方法。

"even" と "odd" の使用
いろいろな子要素を選択するための even と odd の使用方法。

:nth-child()、:nth-last-child()、:nth-of-type()、:nth-of-last-type() の間の違い
p:nth-child(2)、p:nth-last-child(2)、p:nth-of-type(2)、p:nth-of-last-type(2) の間の違い。


❮ jQuery Selectors