CSSの「:nth-of-type()」で、兄弟の中から「あの」要素だけをピンポイントで狙い撃ち！

「あー、あのリストの３番目のやつだけ色を変えたいのに、なんでか他のも変わっちゃうんだよ！」

Web制作をしていると、こんな経験、一度はしたことありませんか？ CSSって、ちょっとしたことで思った通りに動いてくれなかったりして、頭を抱えることもしばしば。特に、似たような要素が並んでいる時に、「この中の特定の子だけをスタイリングしたい」って思った時、意外と手こずるんですよね。

でも、大丈夫！ 今日はそんな悩みをズバッと解決してくれる、CSSの魔法の呪文、「:nth-of-type()」について、とことん優しく、そして分かりやすく解説していきます。まるで、お気に入りの文房具を整理するみたいに、CSSの仲間たちを上手に使いこなせるようになっちゃいましょう！

:nth-of-type() って、一体全体なんだ？

「:nth-of-type()」って、聞いただけだとちょっと難しそうですよね。でも、大丈夫。この呪文、実はとっても素直で、言われた通りに動いてくれるんです。

例えるなら、こんな感じ。

「おもちゃ箱の中に、車のおもちゃが5台、電車のおもちゃが3台、飛行機のおもちゃが2台、それぞれ入っているとします。この時、もしあなたが『車のおもちゃの3台目だけを取り出して、ピカピカに磨きたい！』と思ったとしましょう。この『車のおもちゃの3台目』っていうのが、まさに:nth-of-type() の考え方なんです。」

つまり、:nth-of-type() は、

• 「親要素」（おもちゃ箱）の中で、
• 「同じ種類のタグ名」（車のおもちゃ）を持つ要素が、
• 「順番に並んでいる」（3台目）時に、
• 「その順番の要素だけ」（3台目だけ）を、
• 「ピンポイントで選んでくれる」

そんな、とっても優秀なセレクタなんです。

「あれ？ :nth-child() と似てない？」って思ったあなた、鋭い！ そうなんです、:nth-child() とすごく似ているんです。でも、ここが一番のキモ！

• :nth-child() は、親要素の中にある「すべての」要素を数えて、n番目の要素を選びます。
• :nth-of-type() は、親要素の中にある「指定したタグ名を持つ」要素だけを数えて、n番目の要素を選びます。

この違い、おもちゃ箱の例で言うと、

• :nth-child() は、おもちゃ箱の中の「全部のおもちゃ」（車も電車も飛行機も全部！）を、入っている順番に数えて、例えば「5番目のおもちゃ」を取り出すイメージ。
• :nth-of-type() は、「車のおもちゃだけ」に絞って、その中での「3番目の車のおもちゃ」を取り出すイメージ。

どうでしょう？ :nth-of-type() の方が、より細かく、狙った要素だけを選びやすいってことが分かりますよね！

さあ、実際に使ってみよう！

言葉だけだとピンとこないかもしれないので、実際にコードで見てみましょう。

例１：リストの偶数番目の項目だけ、ちょっぴり目立たせたい！

例えば、こんな商品リストがあったとします。

このリストの「偶数番目の商品」だけ、背景色を薄くして、ちょっと目立たせたい！ そんな時、:nth-of-type(even) を使うと、あら不思議！

.product-list p:nth-of-type(even) {
background-color: #e0f7fa; / 薄い水色で /
padding: 5px; / ちょっと余白を /
}

解説:

• `.product-list p` : 「.product-list」というクラスがついた要素の中にある、「p」タグの要素を選んでいます。
• `:nth-of-type(even)` : ここが今日の主役！ 「p」タグの中で、偶数番目（2番目、4番目…）の要素だけを選んでね、という意味です。「even」は「偶数」のこと。

これで、商品Bと商品Dの背景が薄い水色に変わって、見やすくなりますね！

例２：最初の見出しだけ、ちょっと大きい字にしたい！

ブログ記事で、見出しがいくつか並んでいるとします。

この中で、「一番最初に出てくるh2タグだけ」を、他の見出しより少し大きくしたい！ そんな時は、:nth-of-type(1) を使います。

.article-content h2:nth-of-type(1) {
font-size: 2.5em; / 通常より大きめの文字サイズ /
color: #333; / ちょっと濃いめの文字色 /
}

解説:

• `.article-content h2` : 「.article-content」クラスの中の、「h2」タグの要素を選んでいます。
• `:nth-of-type(1)` : 「h2」タグの中で、1番目の要素だけを選んでね、という意味です。

これで、一番最初の「今日のテーマ」という見出しだけ、特別感が出て、読者さんも「おっ！」と思ってくれるはずです。

例３：特定の「数」だけを狙う！ 「odd」と「n」の魔法

「偶数」や「奇数」だけでなく、もっと自由な選び方もできるんです。

• :nth-of-type(odd) : 奇数番目（1番目、3番目、5番目…）の要素を選びます。
• :nth-of-type(n) : これはちょっと不思議だけど、「すべての」要素を選びます。でも、これ単体で使うことはあまりなくて、他の数字と組み合わせて使うことが多いんです。

例えば、「3番目以降のpタグすべて」にスタイルを適用したい！ なんていう、ちょっとマニアックなこともできちゃいます。

.data-table p:nth-of-type(n+3) {
color: #00796b; / 落ち着いた緑色で /
font-weight: bold; / 太字にして /
}

解説:

• `.data-table p` : 「.data-table」クラスの中の、「p」タグの要素を選んでいます。
• `:nth-of-type(n+3)` : ここがポイント！ 「p」タグの中で、3番目以降のすべての要素を選んでね、という意味です。「n+3」は「n（0, 1, 2…）に3を足した数」なので、3番目、4番目、5番目…と続いていきます。

これで、データ３、データ４、データ５だけ、緑色の太字になって、目立たせることができますね！

:nth-of-type() を使う上での、ちょっとしたコツ

:nth-of-type()、とっても便利なんですが、使う上でいくつか知っておくと、さらにスムーズになるコツがあります。

1. 親要素の構造をしっかり理解する

:nth-of-type() は、あくまで「親要素の中」で、同じタグ名の兄弟要素を数えます。なので、HTMLの構造をしっかり把握していないと、「あれ？ なんでこの要素が選ばれないんだろう？」ってことになりがち。

例えば、こんな構造を考えてみてください。

もし、あなたが「一番最初のpタグ」を選びたいと思って、`:nth-of-type(1)` と書いたとします。

p:nth-of-type(1) {
color: red;
}

この場合、一番最初の「これは1番目のpタグ」が赤くなります。
でも、もし「2番目のpタグ」を選びたいと思って、`:nth-of-type(2)` と書いたとします。

p:nth-of-type(2) {
color: blue;
}

この場合、青くなるのは、3番目の「これは3番目のpタグ」なんです！ なぜなら、2番目の `

` タグは、一番上の `