nth-childとnth-of-typeの違いを徹底解説｜ウェブ制作初心者でも分かるセレクタの使い分け

---

nth-childとnth-of-typeの違いを徹底解説

この節ではまずnth-childとnth-of-typeの基本概念を正しく把握します。nth-childは親要素の子要素全体の順番を基準に動作します。つまり親が持つ全ての子要素を数え、何番目かで選択します。
一方、nth-of-typeは同じ要素名だけを数える“タイプ別の順番”を使います。親の中で複数の異なる要素が混ざっていても、同じタグの要素だけを数える点が大きな違いです。

この違いを知っていれば、nth-childを誤って使ってしまい、狙わない要素がスタイルされて混乱する事態を避けられます。さらに、実務ではHTMLの構造が変わりやすく、階層が深くなると狙いどおりの要素を取るのが難しくなります。このとき適切なものを選ぶ判断力が働くと、保守性が高く安定したCSS設計が実現します。

この先、実例を通じて使い分けを実感しましょう。親の中に複数の異なる要素が混じっているケースでは、nth-childは便利ですが、同じタイプの要素だけを集計したい場合は nth-of-type の方が安全です。

実際の現場では、nth-child を使用して全体のレイアウト調整を行い、nth-of-type を補助的に使う場面が多く見られます。たとえばカード型のリストでは、要素の追加や削除があってもアイコンや本文といった“同じタイプの要素”を正確に狙えることが重要です。

このような理解をもとに、次のセクションでは基本の差を表で整理し、実際のコード例で具体的な使い分けを示します。

基本の違いを整理する

まず前提として、セレクタの動作はCSSの仕様で決まっています。nth-childは親要素の子要素全体の位置を基準に選択します。たとえば ul の直下にある

が3つ並んでいるとき、li:nth-child(3) は必ず3番目の

を指します。ここで重要なのは、ul 以外の非

要素が混ざっていても、全体の順番でカウントされる点です。
一方、nth-of-type は同じ要素名の子要素だけを数えます。例えば

の中に
• と
  が混在していても、li:nth-of-type(3) は 3番目の
• を指します。
  この違いにより、同じ階層でも狙う対象が大きく変わることがあります。

  ここでのポイントは“対象の特定方法”を理解することです。nth-child は親の全体の並びを尊重するため、他の要素の有無で結果が影響を受けます。反対に nth-of-type は同じ名前の要素だけを数えるので、テキストと画像が混在していても、同じタイプのアイテムを連続して指定しやすくなります。実務では、データの動的追加や削除に備えて、どの要素が変化しても意図した要素を保持できる設計が求められます。

  下の表は要点を整理したものです。これを覚えると現場で迷わず選択できます。

  able>観点nth-childnth-of-type基準の対象親の全ての子要素の位置同じ名前の子要素だけの位置混在要素の扱い他の要素の影響を受けやすい同じ要素のみカウントするため安定する実用のコツ全体の並びを把握する場面同じタイプを狙う場面に最適ble>

  この表を根拠に、実際のCSSに落とし込むときは、まず狙いたい要素が“全体の位置”で決まるか“同種の要素内の順番”で決まるかを確認してください。

  具体例で使い分けを学ぶ

  具体的なケースを見ていきましょう。例1はリストの最初の項目の色を変える場合です。これは li:first-child または li:nth-child(1) で実現します。
  この場合、他の要素が混在していても1番目の子を指します。

  例2は同じく

• が複数あるリストで、3番目の
• だけを強調したい場合です。ここには を使います。
  このとき、もし
• の3番目が別の要素で入れ替わっても、対象は3番目の
• のままです。

  例3はカード状のアイテム群で、偶数番目のカードにだけボーダーを付けたい場合です。全体の奇数・偶数を扱う場合は nth-child(2n) のようなパターンも出てきますが、ここでは nth-of-type を使って同じカード要素だけを数えながら調整します。

  このように、場面に応じて2つのセレクタを使い分ける練習を積むと、CSSの柔軟性が高まり保守性も上がります。

  ピックアップ解説

  ねえ、nth-childとnth-of-typeの話、難しく聞こえるかもしれないけど要は“どう数えるか”の違いだけなんだよ。nth-childは親の全体の順番を見て選ぶ一方、nth-of-typeは同じタグの要素だけを数える。これを使い分えると、リストの中で特定のタイプだけを狙えるようになる。実務で混ざる要素を考えると、どちらを使うべきか判断できるようになるとCSSがずっと扱いやすくなるよ。いまから手を動かしてサンプルを試してみよう。検証ツールを使えば、選択がどこでヒットしているかを直感的に確認できる。初めは混乱するかもしれないけれど、使い分けの感覚をつかむとコードの修正も楽になる。

  ---