Nth-of-Type – nth-childとの違いと基本的な使い方

CSSの疑似クラス`:nth-of-type`は、同じタグ名を持つ兄弟要素の中で指定した位置にある要素を選択するための強力なツールです。リスト項目の交互装飾やグリッドレイアウトの調整など、Web制作現場での活用シーンが豊富な機能として知られています。

`:nth-of-type`を活用すれば、JavaScriptを使わずにCSSのみで要素の配置や装飾を制御できます。本稿では、基本的な使い方から`:nth-child`との違い、よくあるエラーと修正方法まで、実際のコード例とともに丁寧に解説します。

nth-of-typeとnth-childの違いは？

`:nth-child`と`:nth-of-type`は、いずれも兄弟要素のn番目を指定する疑似クラスですが、数え方の基準が大きく異なります。理解しておかないと期待通りにスタイルが当たらない原因にもなるため、それぞれの特性を把握しておくことが重要です。

`:nth-child`は親要素の全子要素を順番に数え、その中に該当する位置の要素があれば適用されます。一方、:nth-of-typeは指定した要素タイプ（タグ名）のみを対象として数えを行います。この違いが、混在要素がある場合に結果を変え分ける分岐点となります。

具体例でみる動作の違い

以下のHTML構造でp要素の3番目を指定する場合考えてみましょう。

<div>
  <p>p1</p>
  <p>p2</p>
  <div>div1</div>
  <p>p3</p>
</div>

この場合、`:nth-child(3)`は全子要素の3番目であるdiv1に適用され、`:nth-of-type(3)`はp要素のみの3番目であるp3に適用されます。:nth-childと:nth-of-typeの違いについては、この数え方の違いを押さえておくだけで使い分けが明確になります。

• :nth-childは親要素の全子要素を順番に数える
• :nth-of-typeは指定したタグ名の要素のみを数える
• h3見出しなど異なる要素が混在する場合は:nth-of-typeが安定
• 奇数・偶数の交互装飾にも有効な選択方法
• リストやグリッドレイアウトでの活用に特に適している

nth-of-typeの基本的な使い方は？

`:nth-of-type`の基本構文は「セレクタ:nth-of-type(数値またはキーワード)」の形式で記述します。数値には正の整数だけでなく、計算式やキーワードも指定でき、柔軟な要素選択が可能になります。

よく使うパターン一覧

CSSでは各式に名称が割り当てられており、可読性の高いコードを書くことができます。奇数を指定する場合は「odd」または「2n+1」、偶数は「even」または「2n」と記述します。

li:nth-of-type(3)     /* 3番目 */
li:nth-of-type(odd)   /* 1,3,5...番目 */
li:nth-of-type(even)  /* 2,4,6...番目 */
li:nth-of-type(n+2)   /* 2番目以降 */
li:nth-of-type(-n+4) /* 1〜4番目 */

3の倍数で指定する場合は「3n」、3で割った余りが2の場合（2,5,8…番目）は「3n+2」と記述します。範囲指定したい場合は二つの条件を組み合わせて「(n+3):nth-of-type(-n+5)」のように記述し、3番目から5番目までの要素を一度に選択できます。

nth-of-typeが効かない原因と対処法

`:nth-of-type`が期待通りに動作しない場合、いくつかの原因が考えられます。問題を切り分けて対処することで、多くのケースは解決できます。

• 異なる要素タイプが混在している → :nth-of-typeに変更して解決
• クラス名で指定したい → JavaScriptで該当要素にクラスを付与後にCSSを適用
• 最初と最後以外を選択したい → :not(:first-of-type)または:nth-of-type(n+2)を使用
• 要素数が少ない場合 → 条件指定の複合記法を検討
• ブラウザ互換性の問題 → MDN公式ドキュメントで確認

デバッグする際は、ブラウザの開発者ツールで要素を選択肢、疑似クラスが正しくマッチしているか確認するのが有効です。ChromeやFirefoxのDevToolsでは、選択された要素に適用されているスタイルをリアルタイムで確認できます。

nth-of-typeで奇数番目や複数要素を指定する方法

奇数番目や偶数番目の要素に異なるスタイルを適用することは、Webデザインでの交互装飾として最も一般的な用途の一つです。`:nth-of-type`を使えば、リストやテーブル、行ごとに気軽にお色を交互に変えられます。

奇数・偶数の基本指定

li:nth-of-type(odd) { background: #f5f5f5; }
li:nth-of-type(even) { background: #ffffff; }

「odd」は1,3,5…番目、「even」は2,4,6…番目を意味し、背景色の交互入れ替えに効果的です。同様に「2n+1」や「2n」と記述しても同じ結果が得られます。

複数条件の指定

複数の条件を同時に適用したい場合は、カンマで区切って指定します。例えば、奇数番目かつ3番目以降の要素全てにスタイルを当てたい場合は以下のように記述します。

li:nth-of-type(odd),
li:nth-of-type(n+3) { color: red; }

この記法は、特別な強調表示を一部の要素に加えて、残りの奇数番目にもベーススタイルを適用したい場合に便利です。複雑な条件でもCSSのみで実現できる点が、`:nth-of-type`の大きな利点です。

nth-of-typeで2番目以降の要素を選択するには？

最初の要素を除いて全てにスタイルを適用したい場面は多いにあります。そんな時に便利なのが「n+数値」の記法です。この形式を使うことで、開始位置から最後までの要素を一括で選択できます。

2番目以降を指定する方法

p:nth-of-type(n+2) { margin-top: 20px; }

この例では、2番目以降のp要素全てにmargin-topが適用されます。「n+2」は「0+2, 1+2, 2+2…」つまり「2, 3, 4…番目」を意味するため、自然に2番目以降が選択されます。

○番目〜○番目までの範囲指定

特定の範囲内だけを選択したい場合は、開始位置と終了位置の二つの条件を組み合わせます。3番目から5番目までの要素を選択したい場合は 다음과記述します。

p:nth-of-type(n+3):nth-of-type(-n+5) { font-weight: bold; }

「n+3」は3番目以降を、「-n+5」は5番目以前を表し、両方の条件を満たす3,4,5番目の要素のみにスタイルが適用されます。この記法は、最初の一部の要素だけ書式を変えたい場合に特に有効です。

ブラウザ対応状況

`:nth-of-type`はCSS Selectors Level 3に定義されている標準仕様であり、現在の主要ブラウザは全て対応しています。Internet Explorer 9以降、Chrome、Firefox、Safari、Edgeで正常に動作します。

古いブラウザへの完全な対応が必要でない限り、特に問題ありません。対応状況を詳しく確認したい場合は、Can I Use等の互換性チェックサイトを利用すると便利です。

nth-of-typeの活用シーンと注意点

`:nth-of-type`はリストやグリッドレイアウトでの交互装飾に最適な機能です。例えば、ニュースサイトの記事リストで偶数行に背景色を付けたり、製品一覧で3商品ごとに区切り線を入れたりと、様様な場面で活用できます。

ただし、`:nth-child`と混同して使用すると、期待と異なる結果になる場合があります。異なる要素タイプが同じ親要素の中に混在している 경우에는、:nth-of-typeを選択することで、より予測可能な動作を保証できます。

公式ドキュメントと仕様

`:nth-of-type`の正式な仕様はW3CのCSS Selectors Level 3で定義されており、公式ドキュメントにおいて「同じ型（タグ名）の兄弟要素の中で、その位置に基づいて要素を照合する」と説明されています。

:nth-of-type() は CSS の擬似クラスで、同じ型（タグ名）の兄弟要素の中で、その位置に基づいて要素を照合します。

— MDN Web Docs

Mozilla Developer Network（MDN）は、最も信頼性の高いCSSリファレンスとして知られており、各ブラウザでの動作確認済みサンプルコードが豊富に掲載されています。仕様書と実装例の両方を参照することで、より深い理解が得られます。

まとめ

`:nth-of-type`は、同じタグ名の兄弟要素を位置に基づいて選択するCSSの疑似クラスです。`:nth-child`不同的是、指定した要素タイプのみで数を数えるため、異なる要素が混在する場合でも正確な選択が可能です。奇数・偶数の交互装飾、2番目以降の範囲指定、倍数の選択など、様様なパターンがサポートされており、JavaScriptを使わずに柔軟なレイアウト制御が実現できます。使い方に困ったら、:nth-childと:nth-of-typeの違いといった解説記事を参考に、適切な選択方法を選んでみてください。

よくある質問