CSSの:nth-child(n)は擬似クラスの一つで、兄弟要素のグループの中で引数で指定した位置にある要素を表します。
引数では整数を直接指定したり、キーワード、数式などを渡す事が出来ます。
:nth-childには引数を一つ渡します。その引数は大きく分けて
:nth-child()の引数に渡すキーワードは次の2つを渡す事が出来ます。
:nth-childの引数には「その要素」のn番目を表す整数や数式でパターンを渡す事でも指定が可能です。
例えば下記のように固定の表示順の番号の指定や、偶数・奇数、計算式を使ったn番目の指定方法が行えます。
/* 2番目のpタグ */
p.nth-child(2) {
}
/* 偶数のpタグ */
p:nth-child(2n) {
}
/* 奇数のpタグ */
p:nth-child(2n+1) {
}
/* 3n+2つまり（5 8, 11, ...番目）*/
p:nth-child(3n+2) {
}上記のサンプルコードでは:nth-childで引数にキーワード、整数、数式をそれぞれ利用した指定の仕方をしています。
このように:nth-childで兄弟要素のグループ内でn番目の要素を指定することが出来ます。
CSSの擬似クラス:nth-childはモダンなブラウザのほぼ全てで対応しています。:nth-childの各ブラウザの対応状況を確認したい方は下記よりご確認頂けます。
CSSで:nth-childを設定したつもりでも、思ったように:nth-childが効いてくれない時があります。:nth-childが効かない場合の対処法については下記を参考にしてください。
:nth-childの擬似クラスで「n番目以降」や「n番目まで」といった指定の仕方を解説します。
本来IE6-8ではCSSの:nth-childは非対応ですが、実は:nth-childの指定でスタイルを適用する方法はあります。IEでも:nth-childを適用したい方はぜひ下記を参考にしてみて下さい。
例えば3番目や7番目、偶数や9番目など特に規則性が無く数式に起こせない場合で:nth-childを複数指定する方法を下記で解説します。
:nth-childでは兄弟要素のグループ内で最初から数えてn番目の要素を表しますが、逆に兄弟要素のグループ内の最後から数えてn番目の要素を表すには:nth-last-childの擬似クラスを利用します。
:nth-childで3の倍数のようなn番目の指定の方法については下記を参考にしましょう。
