:nth-child()

エヌスチャイルド（セレクタ）

意味特定の順番にある子要素

:nth-child()とは？

:nth-child()セレクタは、子要素の中から特定の順番にある要素を選択するために使われます。またこのセレクタは、数式やキーワードを使って、どの子要素をスタイル適用の対象にするかを指定することもできます。例えば、奇数番目の子要素や、3の倍数にあたる子要素など、柔軟な指定が可能です。

:nth-child()の具体的な使い方

奇数番目の要素にスタイルを適用する例

<style>
  li:nth-child(odd) {
    background-color: #f2f2f2;
  }
</style>

<ul>
  <li>1番目の項目</li>
  <li>2番目の項目</li>
  <li>3番目の項目</li>
</ul>

リスト(li要素)の中で奇数番目の子要素の背景色を灰色に設定しています。

特定のパターンで要素を選択する例

<style>
  li:nth-child(3n+1) {
    color: blue;
  }
</style>

<ul>
  <li>1番目の項目</li>
  <li>2番目の項目</li>
  <li>3番目の項目</li>
  <li>4番目の項目</li>
  <li>5番目の項目</li>
</ul>

3の倍数+1番目（1番目、4番目、7番目...）の子要素の文字色を青に設定します。

:nth-child()に関するよくある質問

Q. :nth-child()の基本的な使い方は？

A. :nth-child()は、親要素内の子要素を選択するためのCSSセレクタです。括弧内に数字や数式を入れて使用します。例えば、:nth-child(2)は2番目の子要素を、:nth-child(odd)は奇数番目の子要素を選択します。

Q. oddとevenの違いは何ですか？

A. :nth-child(odd)は奇数番目（1,3,5...）の子要素を選択し、:nth-child(even)は偶数番目（2,4,6...）の子要素を選択します。これらは、交互にスタイルを適用する際によく使用されます。

Q. 数式を使う場合の書き方は？

A. :nth-child()内で数式を使用する場合、an+b形式で書きます。aは周期、bは開始位置のオフセットです。例えば、:nth-child(3n+1)は3の倍数+1番目（1,4,7...）の要素を選択します。

:nth-child()が学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、CSSの:nth-child()や:only-of-type、:where()、::before、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。