CSSのnth-child()を完全攻略！特定の順番にスタイルを当てる方法

1. nth-childとは？順番を指定する魔法の言葉

1. nth-childとは？順番を指定する魔法の言葉

ウェブサイトを作っていると、同じような項目が縦や横に並ぶことがよくあります。例えば、ランキングの1位だけを豪華にしたり、表（テーブル）の行を読みやすくするために1行おきに色を塗ったりしたい場合がありますよね。そんな時に使うのがnth-child()（エヌス・チャイルド）です。

これはCSSの疑似クラス（ぎじくらす）と呼ばれる仲間で、HTMLのタグに「直接名前をつけなくても、上から数えて何番目か」という条件でスタイルを指定できる仕組みです。パソコンを触ったことがない方でも、学校の出席番号をイメージすると分かりやすいかもしれません。「出席番号3番の人だけ立ってください」と指示を出すのが、この命令の役割です。

2. ピンポイントで指定！数字を使った基本の書き方

2. ピンポイントで指定！数字を使った基本の書き方

まずは、特定の1箇所だけを指定する方法を覚えましょう。使い方はとても簡単で、タグ名のすぐ後ろに:nth-child(数字)と書くだけです。カッコの中に入れた数字の順番にある要素だけが反応します。

例えば、リストの「2番目」だけを青くしたい場合は、カッコの中に「2」と入れます。一つ注意点として、コンピュータの世界では「0」から数え始めることも多いですが、この命令では素直に「1、2、3...」と1から数えて大丈夫です。初心者の方にも優しい設計ですね。

<style>
    .point-list li:nth-child(2) {
        color: blue;
        font-weight: bold;
    }
</style>

<ul class="point-list">
    <li>1番目の項目</li>
    <li>2番目の項目（ここが青くなります）</li>
    <li>3番目の項目</li>
</ul>

3. 偶数と奇数を一瞬で選ぶ便利なキーワード

3. 偶数と奇数を一瞬で選ぶ便利なキーワード

次に、1行おきにデザインを変えたいときに便利な「キーワード指定」を紹介します。実は、カッコの中には数字だけでなく、odd（オッド：奇数）やeven（イーブン：偶数）という言葉を入れることができます。

oddは1番目、3番目、5番目といった奇数の順番を指定し、evenは2番目、4番目、6番目といった偶数の順番を指定します。これを使えば、しましま模様の表（ストライプテーブル）も一瞬で作れます。手作業で1つずつ色を塗る必要がないので、もし項目が100個に増えても、CSSはたった1行で済むのです。これは業務効率を劇的に上げるテクニックです。

<style>
    .stripe-table div {
        padding: 10px;
        border: 1px solid #ccc;
    }
    /* 偶数番目（even）の背景をグレーにする */
    .stripe-table div:nth-child(even) {
        background-color: #f2f2f2;
    }
</style>

<div class="stripe-table">
    <div>1行目：白</div>
    <div>2行目：グレー（偶数）</div>
    <div>3行目：白</div>
    <div>4行目：グレー（偶数）</div>
</div>

4. 応用編！nを使った「倍数」の指定方法

4. 応用編！nを使った「倍数」の指定方法

「3の倍数だけ色を変えたい」というように、もっと複雑なルールを作りたいときは、アルファベットのnを使います。これは数学の授業で出てきた変数のようなものですが、難しく考える必要はありません。例えば、カッコの中に3nと書くと、「3、6、9...」と3番目ごとの要素にスタイルが適用されます。

「n」は「0から始まる数字が入る箱」だとイメージしてください。3nなら「3かける0＝0（無視）」「3かける1＝3」「3かける2＝6」という計算が自動で行われます。横並びのカードデザインで、右端のカードだけ余白を調整したいときなど、非常に多くの場面で活躍するプロの書き方です。

5. 計算式を組み合わせて「4番目以降」を指定する

5. 計算式を組み合わせて「4番目以降」を指定する

さらに高度な指定として、足し算を組み合わせることもできます。例えば、n + 4と書くと、「4番目、5番目、6番目...」というように、4番目より後のすべての要素を選ぶことができます。これは「最初は大きく表示したいけれど、4つ目からは小さくリスト表示したい」といった、ニュースサイトのようなレイアウトでよく使われます。

逆に、-n + 3と書けば、「3番目より前（1〜3番目）」だけを選ぶことも可能です。プラスやマイナスの記号を使いこなすことで、まるでコンピュータと会話するように細かくデザインの指示を出せるようになります。初心者のうちは驚くかもしれませんが、慣れるとパズルのようで楽しくなりますよ。

<style>
    .math-list span {
        display: inline-block;
        margin: 5px;
        padding: 5px 10px;
        border: 1px solid #333;
    }
    /* 3番目から後の要素すべてに背景色をつける */
    .math-list span:nth-child(n + 3) {
        background-color: #ffeb3b;
    }
</style>

<div class="math-list">
    <span>1</span>
    <span>2</span>
    <span>3（ここから黄色）</span>
    <span>4（ここも黄色）</span>
    <span>5</span>
</div>

6. 似ているけれど違う！nth-of-typeとの使い分け

6. 似ているけれど違う！nth-of-typeとの使い分け

ここで初心者が一番間違いやすいポイントを解説します。実はnth-childに似た命令でnth-of-type（エヌス・オブ・タイプ）というものがあります。この2つの違いは何でしょうか？

nth-childは「タグの種類に関係なく、上から何番目の子供か」を数えます。対してnth-of-typeは「特定のタグだけに絞って、その中で何番目か」を数えます。例えば、見出しや画像が混ざったページで、文章（pタグ）だけを数えてスタイルを当てたいなら、nth-of-typeの方が安全です。この違いを知っているだけで、思い通りにスタイルが当たらないというトラブルを回避できます。

7. 画像ギャラリーでnth-childを活用する

7. 画像ギャラリーでnth-childを活用する

画像ギャラリーを作る際にもnth-childは非常に便利です。例えば、3枚の画像が横に並ぶレイアウトを作るとき、3枚目ごとに右側の余白をゼロにする設定が必要になることがあります。そうしないと、余白のせいで3枚目の画像が次の段に落ちてしまう「レイアウト崩れ」が起きるからです。

そんな時は、:nth-child(3n)を指定して余白を消せば、どんな画面サイズでも綺麗に整列させることができます。このように、見た目のおしゃれさだけでなく、画面の骨組みを正しく保つためにもこの技術は使われています。サンプル画像を使って、少しだけ動きも加えた例を見てみましょう。

<style>
    .gallery {
        display: flex;
        flex-wrap: wrap;
    }
    .gallery img {
        width: 100px;
        margin: 10px;
        border: 2px solid transparent;
    }
    /* 奇数番目の画像にだけ枠線をつける */
    .gallery img:nth-child(odd) {
        border-color: #f06;
    }
</style>

<div class="gallery">
    <img src="/img/sample120-120.jpg" alt="1枚目">
    <img src="/img/sample120-120.jpg" alt="2枚目">
    <img src="/img/sample120-120.jpg" alt="3枚目">
</div>

8. パフォーマンスも良くなる！効率的なコード

8. パフォーマンスも良くなる！効率的なコード

一つずつにクラス名（名前）をつける方法でも、確かに同じことは実現できます。しかし、項目が何百個もある場合にすべてに名前をつけるのは、入力の手間だけでなく、コンピュータが読み込むデータの量も増やしてしまいます。nth-childを使うことで、HTMLファイルがスッキリと軽くなり、表示速度の向上にもつながります。

また、将来的に項目が増えたり減ったりしても、CSSが自動で順番を計算し直してくれるので、修正作業が一切不要になります。これをメンテナンス性が高いと言います。初心者から一歩踏み出して、効率的で美しいコードが書けるようになりましょう。

9. 上手く効かない時のチェックリスト

9. 上手く効かない時のチェックリスト

最後に、もしnth-childを書いてもスタイルが変わらない時に確認してほしいポイントを紹介します。一番多い原因は「親要素が違う」ことです。nth-childはあくまで同じ箱（親要素）に入っている兄弟同士で順番を数えます。箱が分かれている場合は、それぞれの箱の中で1番目から数え直しになります。

また、クラス名と組み合わせて使うときも注意が必要です。.item:nth-child(2)と書いた場合、「itemというクラスがついている中の2番目」ではなく、「親から見て2番目の子供で、かつitemというクラスがついているもの」という意味になります。この細かいルールを意識するだけで、CSSのトラブル解決能力がぐんと上がりますよ。