【入門編】 :nth-of-type() と :nth-last-of-type() – CSS実践ガイド

こんにちは。フロントエンドの現場で長年CSSと格闘してきた者です。

CSSを学び始めたばかりの頃、誰しもが一度は「あれ？なんで思った通りに色が塗られないんだ？」と頭を抱える瞬間がありますよね。特に、順番を指定するセレクタは「なぜか無視される」という悲しい事故が起きがちです。

今日は、そんな悩みをスッキリ解消してくれる「`:nth-of-type()`」と「`:nth-last-of-type()`」という、ちょっと頼りになる相棒たちを紹介します。これらを使いこなせると、CSSの記述がグッとスマートになりますよ。

—

まず、基本の「`nth-child`」と今日紹介する「`nth-of-type`」の違いを、ある「お買い物」の例えで見てみましょう。

`nth-child`（兄弟の中で何番目？）: 「列に並んでいる人全員」をカウントします。リンゴだろうがミカンだろうが、とにかく左から順番に数えます。
`nth-of-type`（同じ種類の仲間の中で何番目？）: 「種類ごと」に分かれた列を想像してください。リンゴの列はリンゴだけでカウントし、ミカンの列はミカンだけでカウントします。

CSSにおいて「種類」とは「タグ（`div`, `p`, `li`など）」のことです。
`p:nth-of-type(2)` と書けば、「`p`タグという仲間のうちの、2番目」だけを指し示すことができるんです。これ、すごく直感的だと思いませんか？

—

百聞は一見にしかず。下のコードをエディタにコピーして、どんな変化が起きるか試してみてください。

1番目の段落（仲間その1）

余計なやつが混ざった！

2番目の段落（仲間その2）

3番目の段落（仲間その3）

/ CSS /
.container p:nth-of-type(2) {
/ pタグという仲間の2番目だけを赤くする /
color: red;
font-weight: bold;
}

もしここで `p:nth-child(2)` を使ってしまうと、「2番目にいるやつ」を指してしまうので、`span`タグに阻まれてうまく動かなかったりします。`of-type`を使えば、間に何が入っていようと、`p`タグだけを数え上げてくれるので、とても安心感があるんですよね。

—

次に紹介するのは、逆から数える `nth-last-of-type()` です。
「リストの最後から2番目だけデザインを変えたい」というシチュエーション、Web制作では本当によくありますよね。

そんな時、わざわざ「全部で何個あるか数えてから計算する」なんて面倒なことはしなくて大丈夫です。「最後から2番目！」と直接指示してしまいましょう。

/ リストの最後から2番目の項目だけ、ちょっと目立たせる /
li:nth-last-of-type(2) {
background-color: #fff3cd; / 薄い黄色でハイライト /
border: 1px solid #ffeeba;
}

これを使えば、たとえリストの項目数が増減しても、常に「最後から2番目」を追いかけてくれるので、運用がめちゃくちゃ楽になります。

—

最後に、初心者の頃によくある「罠」を一つだけお伝えしますね。

`nth-of-type` はあくまで「タグの種類」で数えます。もし、同じ`p`タグに違う`class`が付いていたとしても、CSSは「`p`タグであること」しか見てくれません。

「あれ？クラス名で指定したのに動かない！」という時は、「CSSはHTMLのタグの並びを厳格に見ているんだな」と思い出してください。クラス名と組み合わせる時は、以下のように書くのが鉄則です。

/ .targetというクラスがついているpタグの中で、2番目のもの /
p.target:nth-of-type(2) {
color: blue;
}

—

最初は難しく見えるルールも、こうして身近な例えに置き換えると、少しだけ親近感がわいてきませんか？

CSSは、ブラウザという相手に「ここをこうしてほしいな」とお願いするお手紙のようなものです。`nth-of-type` を使えば、「`p`タグの仲間たちの中で、2番目の子にお願いがあるんだけど…」と、より明確に伝えることができます。

ぜひ、恐れずに色々な数字を入れて遊んでみてください。うまく動かなかったら、「あ、いまはタグの種類をカウントし間違えたんだな」と気づくだけで、もうあなたは立派なエンジニアの階段を登っています。

応援していますよ！また何かあれば、いつでも聞きに来てくださいね。