:nth-of-type()

エヌスオブタイプ（セレクタ）

意味 n番目の要素

:nth-of-type()とは？

:nth-of-type()セレクタは、特定の型（タグ名）の要素の中でn番目の要素を選択するために使用する疑似クラスです。これにより、例えば、3番目の<p>要素や奇数番目の<li>要素など、特定のパターンに従ってスタイルを設定することができます。

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

2番目の段落要素のスタイリング例

<style>
  p:nth-of-type(2) {
    color: red;
  }
</style>

<div>
  <p>1番目の段落</p>
  <p>2番目の段落</p>
</div>

各<p>要素のグループの中で2番目の<p>要素のテキスト色を赤に設定します。

奇数番目のリスト項目のスタイリング例

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

<ul>
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
  <li>項目4</li>
</ul>

リスト内の奇数番目の項目の背景色を薄いグレーに設定します。

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

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

A. :nth-of-type()は、要素の型に基づいて特定の順番の要素を選択します。例えば、p:nth-of-type(2)は2番目の段落を選択します。また、odd、even、数式（例：2n+1）も使用できます。

Q. nに負の値は使えますか？

A. はい、負の値を使用できます。例えば、:nth-of-type(-n+3)は最初の3つの要素を選択します。これは「後ろから数えてn番目まで」という意味ではなく、式の結果が正の値になる要素を選択します。

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

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

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