こんにちは！フロントエンドの現場で日々CSSと格闘しているエンジニアです。
CSSを学び始めると、`class`や`id`で指定する基本にはすぐに慣れますよね。でも、「リストの最後から2番目だけデザインを変えたい」とか、「一番下の要素だけ余白を消したい」なんていう、「ちょっとひねった指定」をしたい時、手が止まってしまうことはありませんか？
そんな時に、魔法のように役立つのが `:nth-last-of-type()` という擬似クラスです。名前はちょっと強そうですが、考え方はとてもシンプル。今日は、この子の「仕組み」と「現場で愛される理由」を、一緒に紐解いていきましょう。
—
1. そもそも `:nth-last-of-type` って何者？
直訳すると「型（type）を、後ろから（last）数えて、何番目（nth）か指定する」というCSSの指示書です。
イメージしてみてください。あなたは今、スーパーのレジに並ぶ行列の最後尾にいます。
「一番後ろ（最後尾）の人から数えて、2番目の人だけオレンジ色の帽子をかぶらせたい」と考えたとします。
前から数えると、行列の人数が変わるたびに「えーと、全部で10人だから…」と計算しなきゃいけませんよね。でも、後ろから数えるなら、人数が何人になろうと「最後から2番目」は常にそこにいます。
この「行列の長さ（要素の数）に左右されず、常に後ろからの位置を指定できる」のが、このセレクタ最大の強みなんです。
—
2. 実践コードで見てみよう
例えば、ニュースサイトの「記事一覧」を作っているとします。リストが何件増えても、「最後から1番目（一番下）の要素だけは、余白をなくしてスッキリさせたい」という場面はよくあります。
- 今日のニュースA
- 今日のニュースB
- 今日のニュースC
- 今日のニュースD
ここで、CSSをこう書いてみます。
.news-list li:nth-last-of-type(1) {
/ 最後から数えて1番目の要素（つまり一番下） /
margin-bottom: 0;
border-bottom: none;
}
たったこれだけで、リストが何件になっても、一番下の要素だけ綺麗に余白が消えます。これ、手動で「最後の要素にだけ `class=”last”` をつける」なんてことをしなくて済むので、メンテナンスの楽さが段違いなんですよ。
—
3. 注意が必要な「型（Type）」のルール
ここが唯一、少しだけ注意が必要なポイントです。名前の通り、「同じタグ（型）の中で」数えます。
もし、リストの中に違うタグが混ざっていたらどうなるでしょうか？
お知らせ1
お知らせ2
これは別のタグ
お知らせ3
この状態で `p:nth-last-of-type(1)` を指定すると、CSSは「`p`タグだけを抽出して」後ろから数えます。`span`タグは無視されるので、後ろから1番目の`p`タグである「お知らせ3」が選ばれます。
「え、思ったのと違う！」とならないために、「自分が数えたいタグの種類をピンポイントで指定している」という意識を持つのがコツですよ。
—
4. 現場での「なるほど！」な活用シーン
実務ではこんな使い方もよくします。
- 「最後から3つ目まで」に特定の装飾をしたい
`li:nth-last-of-type(-n + 3)` と書くと、「後ろから1番目、2番目、3番目」のすべてをまとめて指定できます。これを使えば、例えば「下から3つ分だけ背景色を変える」といったリッチな演出も一瞬です。
- 要素が1つしかない時だけ特別なデザインにする
`li:only-of-type` と組み合わせることもありますが、`nth-last-of-type(1)` を使って「要素が1つしかない＝後ろから1番目でもある」という条件を応用して制御することもあります。
—
最後に：CSSは「仲良くなれる道具」です
最初は複雑に見えるセレクタも、こうして「後ろから数えるだけ」と分解してみると、なんだか親近感が湧いてきませんか？
CSSは、あなたの代わりに「よしなにやってくれる」便利な道具です。最初は間違えても大丈夫。「あれ、思ったところにかからないな？」と思ったら、また一つずつ数え直してみればいいんです。
その繰り返しこそが、あなたを本当のスペシャリストへと導く一番の近道です。ぜひ、次回のコーディングで「最後の一つ」をこの魔法のセレクタに任せてみてくださいね。応援しています！
コメント