こんにちは！フロントエンドの現場を渡り歩いてきた、ちょっとCSSにうるさいおじさん…いや、あなたの専属チーフアーキテクトです。

CSSを書き始めてしばらく経つと、誰もが一度はこんな壁にぶつかります。
「あれっ？奇数番目の要素だけに色をつけたいのに、なぜか意図しない場所が光るぞ……？」

そう、CSSの「数え方」には、ちょっとした罠があるんです。特に `(:nth-of-type)` と `(:nth-child)` のコンビは、多くのコーターたちの心をへし折ってきた（そして私も昔は盛大にハマった）定番のトラップ。

でも大丈夫！今回は、身近な例えを交えながら、この「型」と「数え方」の秘密を優しく解き明かしていきます。肩の力を抜いて、一緒に見ていきましょう。

—

1. カフェの行列で考えてみよう：`child` と `of-type` の決定的な違い

まずはイメージしやすいように、とあるおしゃれなカフェのカウンターを想像してください。

そこには、こんなふうにお客さん（要素）が並んでいます。

1. 【おじさん】（`

`タグ）
2. 【お姉さん】（`

`タグ）
3. 【お姉さん】（`

`タグ）
4. 【お姉さん】（`

`タグ）

ここで店員さんが、「前から2番目の人、お会計どうぞー！」と声をかけたとします。

`:nth-child(2)` のやり方

「とにかく並び順で数えるぜ！」
1番目のおじさん、2番目のお姉さん！はい、あなたです。

`:nth-of-type(2)` のやり方

「同じ種類（タグ）の人だけで数えるぜ！」
`

`タグのグループだけに注目します。1人目のお姉さん、2人目のお姉さん！はい、あなたです。

……どうでしょう？イメージできましたか？

`:nth-child(n)` は、親要素の中にある「すべての兄弟要素」をひっくるめて上から順番に数える荒々しいヤツです。
`:nth-of-type(n)` は、指定した「同じタグ名の仲間だけ」をこっそり抽出して順番に数えるスマートなヤツです。

現場でよくある事故は、まさにこの違いを忘れてしまうこと。「2番目の段落を指定したつもりが、一番上にいた見出し（`

`）を含めて数えちゃってズレてた……！」なんていうのは、ベテランでもやらかす「あるある」です。安心してください、あなただけじゃありませんよ。

—

2. 実例で見てみよう！コードで体感する挙動の違い

百聞は一見にしかず。実際にコードを書いてその違いを肌で感じてみましょう。
ここでは、よくある「見出しと文章が入り混じったカード型のレイアウト」を例にします。

以下のコードを、そのままあなたのエディタ（VS Codeなど）に貼り付けて、ブラウザで開いてみてください。

:nth-of-typeの実験室

1. カフェの行列で考えてみよう：`child` と `of-type` の決定的な違い

本日のオススメ情報
1. ブラウザでどう見える？
` （1番目の子ども：`child(1)`） 2. ` ` （2番目の子ども：`child(2)`） 3. ` ` （3番目の子ども：`child(3)`）つまり、`:nth-child(2)` は「タグの種類に関係なく、上から2番目のやつ」を指定したので、` ` のすぐ下にある1つ目の ` ` が選ばれてしまったのです。では、CSSを書き換えてみましょう！
` は無視して、` ` だけをカウントするので、正しく2番目の段落を狙い撃ちできたというわけです。 — 3. 実務で「圧倒的によく使う」シチュエーション
1. まとめ：迷ったら自分に問いかけてみよう

本日のオススメ情報

1つ目の段落テキストです。

2つ目の段落テキストです。

ブラウザでどう見える？

上記のコードのままだと、`.card p:nth-child(2)` が適用されています。
結果はどうなるでしょう？

なんと、「1つ目の段落テキストです。」 が赤色になります。

「あれっ？ 2番目の段落を指定したはずなのに、1つ目が選ばれた！？」ってパニックになりましたか？大丈夫、それが正しい挙動です。

理由をもう一度おさらいしましょう。
`.card` の中身は、こう並んでいましたよね。
1. `

` （1番目の子ども：`child(1)`） 2. ` ` （2番目の子ども：`child(2)`） 3. ` ` （3番目の子ども：`child(3)`）つまり、`:nth-child(2)` は「タグの種類に関係なく、上から2番目のやつ」を指定したので、` ` のすぐ下にある1つ目の ` ` が選ばれてしまったのです。では、CSSを書き換えてみましょう！

ここで、コメントアウトしている `.card p:nth-of-type(2)` の方を生かしてみてください（上のコードのコメントを外してみましょう）。

するとどうでしょう？
今度は「2つ目の段落テキストです。」 が緑色に変わります。

なぜなら、`:nth-of-type(2)` は、`

` という同じタグの仲間だけで数えたときの上から2番目を探すからです。
`

` は無視して、` ` だけをカウントするので、正しく2番目の段落を狙い撃ちできたというわけです。 — 3. 実務で「圧倒的によく使う」シチュエーション

「理屈はわかったけど、実際のWeb制作でどんなときに `nth-of-type` を使うの？」という疑問が湧いてきますよね。

チーフアーキテクトとして現場で一番おすすめしたい使い所は、「CMS（WordPressなど）で吐き出される、構造がちょっと不揃いな記事本文エリア」です。

ブログの記事本文などは、ライターさんによって書き方がバラバラですよね。

ある記事は、見出しの直後にすぐ段落が来る。
別の記事は、見出しのすぐ下に画像を挟んでいる。

こういう「何が来るか完全に予測できないけれど、出てきた `

` タグや `

/ 記事内の「3番目以降に出てきた画像」だけちょっと小さくする、といったワザ /
article img:nth-of-type(n + 3) {
max-width: 80%;
margin: 0 auto;
}

※ `n + 3` は「3番目以降すべて」を指す魔法の呪文です。これについても、また別の機会にたっぷり語りましょう！

—

まとめ：迷ったら自分に問いかけてみよう

CSSのセレクタで迷ったときは、心の中でこう自分に問いかけてみてください。

「全体の中から、順番（何番目か）で選びたいな」 👉 `:nth-child`
「同じ仲間（同じタグ）だけに絞って、その中で何番目かを知りたいな」 👉 `:nth-of-type`

最初は「どっちがどっちだっけ？」と手が止まるのが当たり前です。エディタを開いて、実際に色を塗ってみて、「あ、ここはタグを無視して数えちゃってるな」と失敗しながら覚えるのが、実は一番の近道なんですよ。

あなたのコーディングライフが、少しでも軽やかで楽しいものになりますように。
それでは、次のフロントエンド談議でお会いしましょう！