CSSのnth-childを使い、子要素の最初、最後、偶数奇数、何番目以降を指定する方法
CSSのnth-childを使って、子要素の最初、最後、偶数奇数、何番目以降を指定する方法が知りたい！
このような疑問に回答します。
本記事では、nth-childを使って特定の子要素に対し、スタイルを適用する仕方を紹介します。
以下より、コードペンを用い、例を紹介していきます。
nth-childを指定した子要素に対しては、テキストを赤色にしています。
nth-childを使って 、何番目にある子要素を指定
See the Pen nth-child（何番目にある子要素を指定） by Kohei (@kouk05) on CodePen.dark
nth-childを使って、2番目にある子要素を指定した例です↑ ↑
対象の子要素のセレクタに、以下疑似クラスをつけることで実装可能です。
:nth-child(2)
（）内の数値を、指定したい子要素の値にするだけでＯＫ
nth-childを使って、子要素の最初・最後を指定
See the Pen nth-child（子要素の最初・最後） by Kohei (@kouk05) on CodePen.dark
nth-childを使って、子要素の最初・最後を指定した例です↑ ↑
対象の子要素のセレクタに、以下疑似クラスをつけることで実装可能です。
子要素の最初
:first-child
子要素の最後
:last-child
nth-childを使って、子要素の偶数番目、奇数番目を指定
See the Pen nth-child（子要素の偶数・奇数指定） by Kohei (@kouk05) on CodePen.dark
nth-childを使って、子要素の偶数番目、奇数番目を指定した例です↑ ↑
対象の子要素のセレクタに、以下疑似クラスをつけることで実装可能です。
子要素の偶数番目
:nth-child(even)
子要素の奇数番目
:nth-child(odd)
nth-childを使って、子要素の何番目以降を指定
See the Pen nth-child（子要素の何番目以降） by Kohei (@kouk05) on CodePen.dark
nth-childを使って、子要素の5番目以降を指定した例です。
対象の子要素のセレクタに、以下疑似クラスをつけることで実装可能です。
:nth-child(n+5)
↑n+の後の数値を、何番目以降にしたい値に変更すればＯＫ
まとめ
結構便利なnth-childですが、IEで対応されてない場合があるので注意してください！
以上で解説を終わります。
