nth-childの使い方を基礎から応用まで徹底解説

CSSでリストやテーブルの「偶数行だけ色を変えたい」「最初の3つだけスタイルを当てたい」と思ったことはありませんか。クラスをひとつひとつ手動で付けていた頃の煩わしさは、nth-childを正しく理解するだけで驚くほど解消されます。個人的な経験では、nth-childの仕組みをしっかり把握してからCSSの記述量が体感で30〜40%ほど減りました。この擬似クラスは一見シンプルですが、数式の書き方ひとつで「最後の○個だけ」「3の倍数番目だけ」といった複雑な指定もできる、非常に奥の深いセレクタです。

この記事では、初めてnth-childに触れる方から実務で使いこなしたい方まで、段階的に理解を深められるよう構成しました。

nth-childとは何か

nth-childは、CSSの擬似クラスセレクタのひとつです。簡単に言えば、「親要素の中で何番目の子要素か」という位置情報をもとにスタイルを適用する仕組みです。

たとえば、5つの<li>要素が並んでいるとき、li:nth-child(3)と書けば3番目の<li>だけにスタイルが当たります。HTMLにわざわざclass="third"のようなクラスを付ける必要がありません。

ここで重要なのは、nth-childのカウントは「1」から始まるという点です。JavaScriptの配列のように0始まりではないので、プログラミングに慣れている方ほど最初に混乱しやすいポイントかもしれません。

基本的な3つの指定方法

nth-childの書き方は大きく3パターンに分けられます。ここではそれぞれを具体例とともに見ていきましょう。

数値で直接指定する方法

もっともシンプルな使い方です。括弧の中に数字を入れるだけで、その番号の子要素を選択できます。

li:nth-child(2)は2番目の子要素、li:nth-child(5)は5番目の子要素にマッチします。特定の1つの要素だけにスタイルを当てたいときに使います。

oddとevenキーワードで指定する方法

テーブルやリストの「ストライプ（しましま）」デザインを作るときに最もよく使われるのが、odd（奇数）とeven（偶数）というキーワードです。

tr:nth-child(even)と書けば、テーブルの偶数行だけに背景色を付けることができます。たった1行のCSSで、視認性の高い縞模様のテーブルが完成します。

数式（An+B）で指定する方法

nth-childの真価が発揮されるのが、この数式パターンです。An+Bという形式で、Aは繰り返しの間隔、Bは開始位置を意味します。

数式の仕組みを理解するコツは、nに0, 1, 2, 3…を順番に代入してみることです。たとえば3n+1なら、n=0のとき1、n=1のとき4、n=2のとき7…という具合に、マッチする番号が計算できます。

実務で役立つ応用パターン

基本を押さえたところで、実際のWeb制作でよく使う応用的な書き方を紹介します。

先頭の○個だけを選択する

:nth-child(-n+3)は、先頭から3つの要素だけを選択します。nに0, 1, 2を代入すると3, 2, 1番目がマッチし、n=3以降は0以下になるためマッチしません。

「新着記事の最初の3件だけ目立たせたい」といった場面で非常に便利です。

○番目以降をすべて選択する

逆に、:nth-child(n+4)と書けば4番目以降のすべての要素を選択できます。「4件目以降は折りたたむ」といったUIの実装に活用できます。

最後の○個だけを選択する

:nth-last-child(-n+3)を使えば、末尾から数えて3つの要素を選択できます。nth-childの兄弟セレクタであるnth-last-childは、後ろから数える点が異なります。

CSS4のofセレクタ構文

比較的新しい機能として、:nth-child(n of .selector)という構文があります。これは「特定のセレクタにマッチする要素だけを数えて、その中のn番目」を指定できる強力な機能です。

従来のnth-childは、要素の種類やクラスに関係なく、すべての兄弟要素を数えていました。そのため、異なる種類の要素が混在する場面では意図しない結果になることがありました。

たとえば:nth-child(2 of .active)と書けば、.activeクラスが付いた要素の中で2番目のものだけを選択できます。HTMLの構造に依存しない、より直感的な指定が可能になります。

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

nth-childと混同されやすいのが:nth-of-typeです。この2つの違いを明確に理解しておくことは、バグを防ぐうえで非常に重要です。

具体的に説明すると、親要素の中に<h2>、<p>、<p>、<p>と並んでいた場合、p:nth-child(2)は「2番目の子要素がpなら」マッチします（この場合マッチ）。一方、p:nth-of-type(2)は「p要素の中で2番目」、つまり全体では3番目の要素にマッチします。

この違いを理解していないと、意図しない要素にスタイルが当たる原因になります。経験上、異なる種類の要素が混在するセクションではnth-of-typeのほうが安全に使えることが多いです。

GridやFlexboxとの組み合わせ

nth-childは、CSSグリッドやFlexboxと組み合わせることでさらに威力を発揮します。

たとえば、3カラムのグリッドレイアウトで「各行の最初のアイテムだけ左マージンをなくす」場合、:nth-child(3n+1)で簡潔に指定できます。Flexboxのflex-wrapと組み合わせれば、折り返し後のアイテムにも一貫したスタイルを適用できます。

おしゃれな無料アイコンを使ったカードUIなどでは、nth-childによる規則的なスタイリングが特に効果的です。カードの背景色を交互に変えたり、特定の位置のカードだけサイズを大きくしたりといった表現が、クラスを追加せずに実現できます。

パフォーマンスとデバッグのポイント

nth-childは便利ですが、いくつか注意すべき点もあります。

パフォーマンスへの影響

通常のWeb制作において、nth-childがパフォーマンスのボトルネックになることはほとんどありません。ただし、DOM要素が数千を超えるような大規模なページで複雑なnth-child数式を多用する場合は、ブラウザのスタイル再計算に影響が出る可能性があります。

そのような場面では、あえてクラスを付与してJavaScriptで管理するほうが効率的な場合もあります。すべてのケースにnth-childが最適というわけではありません。

デバッグのコツ

nth-childが意図どおりに動かないとき、多くの場合は「数え方の誤解」が原因です。ブラウザのDevToolsで要素を選択し、兄弟要素の順番を実際に確認してみましょう。

特に、テキストノードやコメントノードはnth-childのカウント対象にはなりませんが、異なるタグの要素はカウント対象になります。テロップのようなUI要素を動的に挿入している場合、意図しない位置ずれが起きやすいので注意が必要です。

nth-childの実用的なコード例まとめ

ここまでの内容を整理し、コピーして使える代表的なパターンをまとめます。

実務では、テーブルのストライプ（odd/even）が圧倒的に使用頻度が高く、次いでカードレイアウトでの先頭数件の強調（-n+X）が続きます。数式パターンはグリッド系のレイアウトで定番ですし、of構文は対応ブラウザの拡大とともに今後さらに普及していくと考えられます。

フリー素材のイラストを活用したWebサイト制作でも、ギャラリーの配置パターンをnth-childで制御する場面は非常に多いです。

よくある質問

nth-childで0番目を指定できますか

いいえ、nth-childのカウントは1から始まるため、:nth-child(0)はどの要素にもマッチしません。数式の中で結果が0以下になる場合も同様にマッチしないため、-n+3のような書き方で「先頭から3つまで」という上限指定が可能になっています。

nth-childはクラスやIDと併用できますか

はい、問題なく併用できます。.card:nth-child(2)のように書くと、「2番目の子要素で、かつ.cardクラスを持つもの」にマッチします。ただし注意点として、これは「.cardクラスの中で2番目」ではなく、「すべての兄弟要素の中で2番目がたまたま.cardなら」という意味です。クラスだけを数えたい場合はCSS4のof構文を使います。

nth-childはJavaScriptのquerySelectorで使えますか

はい、document.querySelectorAll('li:nth-child(odd)')のように、JavaScriptのセレクタとしても完全に機能します。DOM操作と組み合わせることで、CSSだけでは難しい動的なスタイル変更にも対応できます。

nth-childとnth-last-childの違いは何ですか

nth-childは先頭（最初の子要素）から数えますが、nth-last-childは末尾（最後の子要素）から数えます。:nth-last-child(1)は最後の要素、:nth-last-child(-n+2)は最後の2つの要素を選択します。両者を組み合わせることで、「要素が3つ以上あるときだけ」といった条件分岐もCSSだけで実現できます。

nth-childがうまく効かないときの対処法は

まず確認すべきは、対象要素の兄弟に予期しない要素が含まれていないかという点です。nth-childはすべての兄弟要素を数えるため、非表示の要素やテンプレートエンジンが挿入するラッパー要素があると番号がずれます。ブラウザのDevToolsで実際のDOM構造を確認し、必要に応じてnth-of-typeやof構文への切り替えを検討してみてください。

まとめ

nth-childは、CSSの中でも特に実用性の高い擬似クラスセレクタです。数値指定、odd/even、数式（An+B）という3つの基本パターンを押さえるだけで、HTMLにクラスを追加することなく、柔軟で保守性の高いスタイリングが可能になります。

さらにCSS4のof構文が普及すれば、これまでJavaScriptに頼っていた複雑な条件付きスタイリングもCSSだけで完結する場面が増えていくでしょう。

まずはテーブルのストライプやリストの先頭強調など、身近なパターンから実際に手を動かして試してみることをおすすめします。数式の仕組みは、一度「nに数字を代入する」感覚を掴めば、自然と応用パターンも書けるようになるはずです。