CSSのnth-of-typeとnth-childの違いを徹底解説！初心者が迷わない具体例

:nth-of-type()と:nth-child()の違いと具体例

先生と生徒の会話形式で理解しよう

生徒

「CSSで『何番目の要素に色をつける』方法を勉強したのですが、nth-childとnth-of-typeの2種類があって、どう違うのか分かりません。」

先生

「どちらも順番を指定する便利な書き方ですが、数え方のルールが少しだけ違うんですよ。」

生徒

「数え方の違いですか？具体的にはどう使い分ければいいのでしょうか？」

先生

「使いどころを間違えると、スタイルが全く効かないこともあります。初心者の方にも分かりやすく、身近な例えで解説しますね！」

1. 順番を指定するCSSの疑似クラスとは？

ウェブサイトを作るとき、同じタグが何度も並ぶことがあります。例えば、箇条書きのリストや、ニュース記事の見出しなどがそうです。これらに対して「2番目だけ赤くしたい」「偶数番目だけ背景をつけたい」といった指示を出すときに使うのが疑似クラス（ぎじくらす）です。

疑似クラスを使えば、HTMLにわざわざ名前（クラス名）をつけなくても、CSSだけで特定の場所を狙い撃ちできます。その中でも、今回紹介するnth-child（エヌス・チャイルド）とnth-of-type（エヌス・オブ・タイプ）は、順番を扱うためのツートップです。パソコンを触ったことがない方でも、学校の整列をイメージすると理解しやすくなりますよ。

2. nth-childは「全体の中の何番目か」を数える

nth-childを一言で表すと、「親要素から見た全ての子供の中での順番」です。例えば、一つの箱の中に、見出し（h1）や文章（p）が混ざって入っているとしましょう。このとき、nth-childはタグの種類を区別しません。一番上にあるものが1番、次が2番…と、単純に上からの並び順で数えていきます。

例えるなら、男女混合のクラスで「出席番号の3番目」を呼ぶようなものです。その子が男子か女子かは関係なく、とにかく名簿の3番目に載っている人を指名します。これがnth-childの数え方です。特定のタグだけを狙ったつもりでも、その上に別のタグがあると順番がズレてしまうのが特徴です。


<style>
    /* 全体の中で2番目にあるpタグにスタイルを適用する */
    .container-child p:nth-child(2) {
        color: white;
        background-color: #007bff;
        padding: 5px;
    }
</style>

<div class="container-child">
    <h2>タイトル（1番目）</h2>
    <p>最初の段落（2番目）</p>
    <p>次の段落（3番目）</p>
</div>

ブラウザ表示

タイトル（1番目）

最初の段落（2番目）

次の段落（3番目）

3. nth-of-typeは「同じ種類の中の何番目か」を数える

対してnth-of-typeは、「指定したタグの種類だけに絞った中での順番」を数えます。先ほどの例で言えば、見出し（h1）は無視して、文章（p）だけを1、2、3…と数えていくルールです。これが「of type（その種類の）」という名前の由来です。

学校の例えに戻ると、男女混合のクラスで「女子の中だけで2番目の人」を呼ぶようなものです。男子が間に何人いようとも、女子だけをピックアップして順番を数えます。そのため、途中に別のタグが割り込んでいても、狙ったタグの順番が狂いにくいというメリットがあります。実務ではこちらの方が直感的に使いやすい場面が多いです。


<style>
    /* pタグの種類の中で2番目にあるものにスタイルを適用する */
    .container-type p:nth-of-type(2) {
        color: white;
        background-color: #28a745;
        padding: 5px;
    }
</style>

<div class="container-type">
    <h2>タイトル（対象外）</h2>
    <p>最初の段落（pの1番目）</p>
    <h3>小見出し（対象外）</h3>
    <p>次の段落（pの2番目）</p>
</div>

ブラウザ表示

タイトル（対象外）

最初の段落（pの1番目）

小見出し（対象外）

次の段落（pの2番目）

4. 初心者がハマる失敗例！効かない原因はこれ

多くの初心者が「CSSが効かない！」と頭を抱えるパターンがあります。それは、nth-childを使って「クラス名がついた要素の何番目」を指定しようとしたときです。例えば、.item:nth-child(1)と書いた場合、これは「itemという名前がついた要素の中で1番目」という意味ではありません。

正解は「親から見て1番目の子供であり、かつitemという名前がついているもの」という意味になります。もし1番目の子供が別の名前だったり、違うタグだったりすると、この条件に当てはまるものが存在しなくなり、スタイルは無視されてしまいます。この「かつ（AND条件）」という考え方は、パソコンの操作に不慣れな方には少し難しいかもしれませんが、非常に重要なポイントです。迷ったら「タグの種類で数えるnth-of-type」を使うと失敗が少なくなりますよ。

5. 具体的な使い分けシーン！リストと記事本文

では、どのように使い分けるのがベストでしょうか。まず、nth-childが最も輝くのは、同じタグだけが並ぶ純粋な「リスト（ulタグなど）」です。リストの中は基本的にliタグしか入らないため、全体を数えるルールでも順番がズレる心配がありません。

一方、nth-of-typeはブログの記事本文のように、見出しや文章、画像がバラバラな順番で出てくる場所に向いています。「記事の中の2番目の画像だけ枠線をつけたい」といった要望には、nth-of-typeが最適です。このように、使いたい場所のHTML構造が「整理されているか（同じ種類だけか）」それとも「混ざっているか」で判断するのがプロのコツです。


<style>
    /* 奇数番目の画像だけ丸くする */
    .photo-gallery img:nth-of-type(odd) {
        border-radius: 50%;
        border: 3px solid #f06;
    }
</style>

<div class="photo-gallery">
    <p>お気に入りの写真集</p>
    <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>

ブラウザ表示

お気に入りの写真集

6. 複雑な条件も指定できる！カッコの中身

これまでは数字の「2」や「3」を指定してきましたが、実はカッコの中にはもっと複雑な指定ができます。例えば、evenと書けば偶数番目、oddと書けば奇数番目といった具合です。これを活用すると、表（テーブル）の行をしましま模様にして読みやすくする「ストライプデザイン」が簡単に作れます。

さらに「n」という文字を使った計算式も使えます。例えば3nと書けば3の倍数（3, 6, 9...）を指定できます。プログラミング未経験の方は少し驚くかもしれませんが、数式を使うことで「無限に続くリスト」に対しても、一度の指定ですべてのスタイルを適用できるのです。これは手作業では絶対にできない、コンピュータならではの便利な機能です。

7. 実際のデザインに役立つ！最後の仕上げテクニック

デザインをより洗練させるために、疑似クラスと組み合わせてよく使われるのが「余白の調整」です。例えば、要素を横に並べたとき、右側にだけ余白（margin）をつけると、一番右端の要素だけ余白のせいでガタついて見えることがあります。そんなとき、:last-childや今回の応用で「3番目ごとに余白を消す」といった指定をすれば、画面端にピタッと揃った美しいレイアウトが完成します。

また、マウスをのせたときの反応（:hover）と組み合わせることも可能です。「3番目の要素だけ、マウスをのせたときに大きくする」といった、少し凝った動きもCSSだけで作れます。こうした細かいこだわりが、訪問者にとって「使いやすくて心地よいサイト」と感じさせる魔法になるのです。まずは今回紹介したサンプルの数値を書き換えて、どのように表示が変わるか自分の目で確かめてみてくださいね。


<style>
    .step-box div {
        border: 1px solid #ddd;
        margin-bottom: 10px;
        padding: 10px;
    }
    /* 1番目だけ文字を大きく、3番目だけ背景を黄色にする */
    .step-box div:nth-of-type(1) {
        font-size: 1.5rem;
        font-weight: bold;
    }
    .step-box div:nth-of-type(3) {
        background-color: #fff3cd;
    }
</style>

<div class="step-box">
    <div>ステップ1：基本を学ぶ</div>
    <div>ステップ2：コードを書く</div>
    <div>ステップ3：表示を確認する</div>
</div>

ブラウザ表示

ステップ1：基本を学ぶ

ステップ2：コードを書く

ステップ3：表示を確認する

2026年最新スキルアップ・実践セミナー