CSSを適用させるにあたって、
最初の要素だけこのスタイルを適用させたい！
偶数の要素だけこのスタイルを適用させたい！
といった、イレギュラーな設定を行いたい場合があります。
そんなときは、CSSの「nth-child」プロパティを使いましょう。
細かくクラス名を振り分けるよりも、簡単で汎用性が高いCSS記述ができます。
目次
「nth-child」プロパティの基本
一般的に、「E:nth-child(n)」という記述を行い、親要素のn番目の子要素であるE要素ということになります。
「nth-child」プロパティの使い方例
色々な「nth-child」プロパティの使い方
実際に、色々なルールでプロパティを適用させる方法について見ていきましょう。
表現の中で使う[n」は変数のことです。変数nは、1ではなく0から始まることを覚えておきましょう。
| 記述ルール | 説明 |
| E:nth-child(3) | 3番目の要素にのみ適用 |
| E:nth-child(odd) | 奇数番目の要素にのみ適用 |
| E:nth-child(even) | 偶数番目の要素にのみ適用 |
| E:nth-child(2n+1) | 奇数番目の要素にのみ適用 |
| E:nth-child(2n) | 偶数番目の要素にのみ適用 |
| E:nth-child(n+5) | 5番目以降（５番目の要素含む）のすべての要素に適用 |
| E:nth-child(-n+5) | 5番目以前（５番目の要素含む）のすべての要素に適用 |
| E:nth-child(3n) | ３の倍数の要素のみ適用 |
| E:nth-child(3n+1) | ３の倍数＋１の要素のみ適用 |
関連プロパティ「first-child」「last-child」「nth-last-child」
「nth-child」プロパティの関連として、子要素の最初のみに適用される「first-child」と、最後の要素のみに適用される「last-child」、最後から数えて指定した要素のみに適用される「nth-last-child」があります。
記述ルール
使い方のサンプル
親要素と合わせて指定する
より具体的な例として、親要素を指定しつつ、その要素の中の子要素にプロパティ値を設定する例を見ていきましょう。
親要素を指定してプロパティ値を設定する例
