: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 番目のパラグラフを選択します |
全 <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) の間の違い。