閉じる

CSS nth-childの使い方｜基本の指定から便利な「of」構文まで実例解説

広告

モダンなWeb制作において、HTMLの構造を汚さずに特定の要素へスタイルを適用する技術は欠かせません。

CSSのnth-child擬似クラスは、その中核を担う非常に強力なセレクタの一つです。

クラス名を一つひとつ付与することなく、特定の順番にある要素をピンポイントで装飾できるため、メンテナンス性の高いコードを実現できます。

本記事では、nth-childの基本的な使い方から、2026年現在のフロントエンド開発で標準的に利用されている最新の「of」構文までを詳しく解説します。

目次 [ close ]
  1. nth-child擬似クラスの基本概念と書式
  2. キーワード指定：奇数（odd）と偶数（even）
  3. 数式「an + b」を用いた高度なパターン指定
    1. 3の倍数（3, 6, 9...）を指定する
    2. 特定の番号以降をすべて指定する
    3. 先頭から特定の番号までを指定する
    4. 指定範囲を組み合わせる
  4. nth-child と nth-of-type の違い
  5. モダンCSSの新常識：nth-child(n of selector)構文
  6. 実践的なデザインへの応用パターン
    1. グリッドレイアウトでの列指定
    2. 最後から数える「nth-last-child」
    3. ナビゲーションの区切り線
  7. nth-childを使用する際の注意点とベストプラクティス
  8. まとめ

nth-child擬似クラスの基本概念と書式

nth-childは、親要素から見た「n番目の子要素」をターゲットにするためのセレクタです。

基本的な書式は、要素:nth-child(引数)という形をとります。

この引数の部分に数値やキーワード、数式を入れることで、自由自在に要素を選択できるようになります。

プログラミング言語の多くは配列のインデックスが0から始まりますが、CSSのnth-childは「1」からカウントが始まる点に注意が必要です。

例えば、リストの2番目の要素を指定したい場合は、次のように記述します。

CSS
/* 2番目のリストアイテムを赤文字にする */
li:nth-child(2) {
    color: #ff0000;
}
実行結果
・リスト1
・リスト2（ここが赤くなる）
・リスト3
・リスト4

このように、特定の順序を指定するだけでスタイルを適用できるのがnth-childの最大のメリットです。

キーワード指定：奇数（odd）と偶数（even）

最も頻繁に使われる指定方法の一つに、「奇数」や「偶数」といったキーワード指定があります。

テーブルの行を一行おきに色分けする「縞々（ストライプ）デザイン」などに最適です。

奇数を指定する場合はodd、偶数を指定する場合はevenを引数に使用します。

CSS
/* 奇数行の背景をグレーにする */
tr:nth-child(odd) {
    background-color: #f0f0f0;
}

/* 偶数行の背景をホワイトにする */
tr:nth-child(even) {
    background-color: #ffffff;
}

この指定により、要素がどれだけ増えても自動的に一行おきのスタイルが維持されます。

手動でクラスを交互に付与する手間が省け、運用のミスも防ぐことができます。

数式「an + b」を用いた高度なパターン指定

nth-childの真価は、「an + b」という数式形式で範囲や間隔を指定できる点にあります。

ここで使われる「n」は、0から始まる整数（0, 1, 2, 3…）を指す変数のような役割を果たします。

「a」は周期（何個おきか）、「b」は開始地点のオフセットを表します。

3の倍数（3, 6, 9…）を指定する

3つおきにスタイルを適用したい場合は、3nと記述します。

nが1のときは3、nが2のときは6となり、正確に3の倍数番目が選択されます。

CSS
/* 3の倍数番目の要素にマージンを設定する */
.card:nth-child(3n) {
    margin-right: 0;
}

特定の番号以降をすべて指定する

「5番目以降の要素すべて」といった指定も可能です。

この場合は、n + 5という式を使います。

nが0のときは5、nが1のときは6となるため、5番目から後ろがすべて対象となります。

CSS
/* 5番目以降の要素を透過させる */
.item:nth-child(n + 5) {
    opacity: 0.5;
}

先頭から特定の番号までを指定する

逆に「最初の3つだけ」を指定したい場合は、nをマイナスにします。

-n + 3と記述すると、nが0のとき3、nが1のとき2、nが2のとき1となり、1〜3番目までが選択されます。

CSS
/* 最初の3つの要素にだけ枠線を付ける */
.item:nth-child(-n + 3) {
    border: 2px solid #000;
}

指定範囲を組み合わせる

複数のnth-childを連結することで、範囲指定も可能です。

例えば、「2番目から5番目まで」を選択する場合は、次のように記述します。

CSS
/* 2番目以降、かつ5番目以前 */
.item:nth-child(n + 2):nth-child(-n + 5) {
    background-color: yellow;
}

このように数式を理解することで、CSSだけで複雑なロジックを実装できるようになります。

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

nth-childとよく混同されるのがnth-of-typeです。

これら二つの違いを理解していないと、意図した通りにスタイルが適用されない原因になります。

重要な違いは、「すべての子要素をカウントするか」、それとも「同じタグの種類だけをカウントするか」にあります。

セレクタカウントの対象
:nth-child(n)親要素内のすべての直系子要素。タグの種類は無視される。
:nth-of-type(n)指定したタグ（要素名）と同じ種類の子要素のみ。

例えば、以下のようなHTML構造があるとします。

HTML
<div class="container">
    <h2>タイトル</h2>
    <p>テキスト1</p>
    <p>テキスト2</p>
</div>

ここでp:nth-child(1)と指定しても、スタイルは適用されません。

なぜなら、divの最初の子要素（1番目）はh2であり、pではないからです。

一方で、p:nth-of-type(1)と指定した場合は、pタグの中での1番目である「テキスト1」にスタイルが適用されます。

構造が複雑な場合は、要素のタイプに依存しないnth-childの方が厳密な指定に向いています。

モダンCSSの新常識：nth-child(n of selector)構文

2026年現在、非常に多くの現場で活用されているのが「of selector」構文です。

これまでのnth-childには、「特定のクラスがついた要素の中だけでn番目を数える」という機能がありませんでした。

しかし、この拡張構文を使うことで、特定の条件に合致する要素のみをフィルタリングしてカウントできるようになりました。

CSS
/* 「hidden」クラスを持たない要素の中から、2番目の要素を選択する */
.item:nth-child(2 of :not(.hidden)) {
    background-color: #00ff00;
}

この機能がなぜ重要なのかを具体例で見てみましょう。

例えば、動的に絞り込みが行われる商品リストがあったとします。

いくつかの要素に.is-hiddenというクラスがついて非表示になっている場合、従来のnth-child(even)では非表示の要素も含めてカウントしてしまいます。

その結果、画面上に見えている要素だけで見たときに、背景色が交互にならないという現象が起きていました。

nth-child(even of :not(.is-hidden))と記述すれば、「現在見えている要素だけ」を対象に偶数番目を選択できるようになります。

これは、JavaScriptによる動的なDOM操作が一般的な現代のWebサイトにおいて、非常に強力な武器となります。

実践的なデザインへの応用パターン

ここでは、実務でよく使われるnth-childのテクニックをいくつか紹介します。

グリッドレイアウトでの列指定

3列並びのレイアウトで、右端の要素だけ余白を消したい場合は、3nを利用します。

CSS
.grid-item {
    margin-right: 20px;
}

/* 3、6、9...番目の要素の右余白をリセット */
.grid-item:nth-child(3n) {
    margin-right: 0;
}

最後から数える「nth-last-child」

nth-childが先頭から数えるのに対し、末尾から数えるnth-last-childも存在します。

「最後から2番目の要素」といった指定が容易になります。

CSS
/* 最後から2番目の要素を指定 */
li:nth-last-child(2) {
    font-weight: bold;
}

ナビゲーションの区切り線

メニュー項目の間に区切り線を入れる際、最後の項目だけ線を表示したくない場合も役立ちます。

:not(:last-child)を使うのが一般的ですが、nth-childを組み合わせて「最後から2番目まで」を指定することも可能です。

nth-childを使用する際の注意点とベストプラクティス

便利なnth-childですが、多用しすぎるとコードの可読性を損なう恐れがあります。

以下のポイントを意識して使用しましょう。

第一に、HTML構造の変更に弱いという側面を理解しておく必要があります。

例えば、途中に新しい要素が挿入されると、nth-childで指定していた順番がずれてしまい、デザインが崩れる原因になります。

静的なコンテンツには最適ですが、要素が頻繁に入れ替わる場所では「of」構文を併用するか、適切にクラス名を付与する判断が必要です。

第二に、パフォーマンス面です。

非常に膨大な数のDOM要素に対して複雑な数式を用いたnth-childを適用すると、レンダリング速度に微細な影響を与える場合があります。

通常のWebサイト制作では無視できるレベルですが、数千行のデータを表示するテーブルなどでは注意が必要です。

第三に、コメントを残すことです。

nth-child(3n+1)のような数式は、一見して何を意図しているのか分かりにくい場合があります。

後からコードを読む開発者のために、「4列グリッドの左端を指定」といったコメントを添えるのがプロのテクニックです。

まとめ

CSSのnth-childは、HTMLの構造をシンプルに保ちながら、高度なスタイリングを実現するための必須知識です。

基本的な数値指定から、odd/evenのキーワード、そして強力な「an + b」の数式による範囲指定まで、その応用範囲は多岐にわたります。

さらに、現代のブラウザ環境で広くサポートされている「of selector」構文をマスターすれば、動的なコンテンツに対しても柔軟に対応できるようになります。

nth-of-typeとの違いを正しく理解し、状況に応じて最適なセレクタを選択することが、美しく効率的なコーディングへの近道です。

今回紹介したテクニックを駆使して、ぜひ洗練されたWebサイト制作に役立ててください。

柔軟なセレクタ指定を使いこなすことで、あなたのCSS設計はより強固でメンテナンスしやすいものへと進化するはずです。

URLをコピーしました！