「末尾から数えて〇番目！」 CSS `:nth-last-of-type()` でオシャレなリスト作り！
こんにちは！Web制作の世界へようこそ！CSSって、最初は「なんだか難しそう…」って思うかもしれないけど、知れば知るほど「なるほど！」の連続で、とっても面白いんですよ。今日は、そんなCSSの中でも、ちょっとマニアックだけど、知っておくと「あれ、このレイアウトどうやって作ったんだろう？」って思わせるような、とっておきのテクニックをご紹介します。
その名も `:nth-last-of-type()`！
「え、なんか長くて難しい名前…」って思ったあなた、大丈夫！この子、実はあなたの身近な「あのこと」ととっても似ているんです。一緒にゆっくり見ていきましょう！
:nth-last-of-type() って、一体何者？
ちょっと想像してみてください。お店で Tシャツをたくさん見ているとき。
「一番上に置いてあるやつ、いいなー」
「真ん中あたりにある、このデザインも気になる！」
って思うこともありますよね。でも、もし店員さんに「一番下から3番目の Tシャツ、見せてください！」って言われたら、どうします？
おそらく、山積みにされた Tシャツの山を、一番下から数え始めて、「1、2、3…あ、これね！」って探すはずです。
CSSの `:nth-last-of-type()` は、まさにこの「末尾から数えて〇番目」をコンピューターに伝えるための呪文なんです。
具体的にどういうこと？
HTMLで、ある親要素の中に、色々な種類のタグが並んでいるとします。例えば、こんな感じです。
この `div` の中には、`h2`、`p`、`img` といった色々なタグが混ざっていますよね。
ここで、もし「この `div` の中で、`p` タグのうち、一番下から数えて2番目のやつだけに、ちょっと目立つように赤色をつけたい！」と思ったとしましょう。
通常なら、一番下から2番目の `p` タグに特別なクラス名をつけたり、JavaScriptで操作したり…と、ちょっと手間がかかりそうです。
でも、`:nth-last-of-type()` を使えば、一瞬です！
.card p:nth-last-of-type(2) {
color: red; / 末尾から2番目のpタグを赤色にする /
}
たったこれだけ！まるで魔法みたいですよね。
なぜ「-last-of-type」が大事なの？
ここで、ちょっと似たような仲間たちの話もしておきましょう。CSSには、`:nth-child()` や `:nth-of-type()` といった、似たような名前の仲間たちがいます。
- :nth-child(n): 親要素の中で、単純に「n番目」にある要素を選びます。タグの種類は関係ありません。
- :nth-of-type(n): 親要素の中で、「同じ種類のタグ」の中で「n番目」にある要素を選びます。
- :nth-last-of-type(n): そして、今日の主役！親要素の中で、「同じ種類のタグ」の中で「末尾から数えてn番目」にある要素を選びます。
ちょっと混乱しやすいポイントなので、もう一度「Tシャツ屋さん」の例で考えてみましょう。
セール品
おすすめ商品
人気商品
新着商品
再入荷商品
この `div.shop` の中で…
- `p:nth-child(2)`：これは「`div.shop` の中で、単純に2番目にある `p` タグ」を選びます。この場合、「おすすめ商品」という `h2` が2番目なので、`p:nth-child(2)` は何も選びません。（もし `p` が2番目にあれば、それが選ばれます。）
- `p:nth-of-type(2)`：これは「`div.shop` の中で、`p` タグとして2番目にあるもの」を選びます。この場合、「人気商品」という `p` が選ばれます。
- `p:nth-last-of-type(2)`：そして、今日の主役！これは「`div.shop` の中で、`p` タグとして、末尾から数えて2番目にあるもの」を選びます。この場合、「新着商品」という `p` が選ばれます！
このように、`:nth-last-of-type()` は、「何番目か」 と 「同じ種類のタグの中で」 という2つの条件を、「末尾から」 という視点で絞り込んでくれる、とっても便利なセレクタなんです。
どんな時に役立つの？ 実践的なコード例を見てみよう！
「なるほど、末尾から数えるんだね」とは思ったものの、具体的にどんな場面で使うんだろう？って思いますよね。いくつか具体的な例を見ていきましょう。
例1：リストの最後の項目だけ、ちょっと違ったデザインにしたい！
例えば、ブログ記事の「関連記事」リストや、FAQのリストで、一番下の項目だけ、少しだけ枠線をつけたり、背景色を変えたりしたい時ってありませんか？
このリストの最後の項目だけに、細い下線を引いてみましょう。
/ リストの各項目に、とりあえず細い下線をつける /
.related-posts li {
border-bottom: 1px solid #eee;
padding-bottom: 10px;
margin-bottom: 10px;
}
/ 最後の項目には、下線はいらない（または、別のデザインにしたい） /
.related-posts li:nth-last-of-type(1) {
border-bottom: none; / 下線を消す /
margin-bottom: 0; / 下の余白も消す /
padding-bottom: 0;
}
おっと、これだと最後の項目だけ下線が消えちゃいますね。もし「最後の項目だけ、特別な装飾をしたい」なら、こうします。
/ リストの各項目に、とりあえず細い下線をつける /
.related-posts li {
border-bottom: 1px solid #eee;
padding-bottom: 10px;
margin-bottom: 10px;
}
/ 最後の項目だけ、背景色を変える /
.related-posts li:nth-last-of-type(1) {
background-color: #f9f9f9; / 薄いグレーの背景 /
}
これで、一番下の項目だけ、ちょっと目立つようになりました！ `:nth-last-of-type(1)` は、つまり `:last-child` と同じ意味になりますが、もしリストの中に `li` 以外の要素が混ざっていた場合でも、確実に最後の `li` を選んでくれるのが `:nth-last-of-type()` の強みです。
例2：テーブルの特定の行に、交互に色をつけたい（でも、ヘッダー行は除く！）
Webサイトでよく見る、データが一覧になったテーブル。ヘッダー行（一番上の見出し行）はそのままに、データ行だけ交互に背景色を変えると、見やすくなりますよね。
| 商品名 | 価格 | 在庫 |
|---|---|---|
| リンゴ | 150円 | 10個 |
| バナナ | 100円 | 25個 |
| オレンジ | 120円 | 15個 |
| ぶどう | 300円 | 5個 |
この `
` の中の `/ tbodyの中のtr（データ行）に、とりあえず背景色をつける /
tbody tr {
background-color: #fff; / 白背景 /
}
/ tbodyの中のtrで、末尾から数えて奇数番目の行に、薄いグレーの背景をつける /
tbody tr:nth-last-of-type(odd) {
background-color: #f2f2f2; / 薄いグレー /
}
/ もしくは、末尾から数えて偶数番目を選ぶこともできる /
/ tbody tr:nth-last-of-type(even) { /
/ background-color: #f2f2f2; /
/ } /
このコードだと、一番下の「ぶどう」の行が薄いグレーになり、その上の「オレンジ」の行は白、その上の「バナナ」の行が薄いグレー…というように、末尾から数えて交互に色がついていきます。
もし、「最初から数えて」交互に色をつけたい場合は、`:nth-child(odd)` や `:nth-of-type(odd)` を使いますが、`:nth-last-of-type()` を使うことで、「一番下から見て、このパターンで」 という、ちょっと変わった（でも、デザインによってはオシャレな）表現が可能になるんです。
例3：フォームの最後に、ちょっとした注意書きを配置したい
お問い合わせフォームなどで、最後の入力欄の後に、ちょっとした注意書きや、送信ボタンのすぐ上に補足説明を入れたい場合。
このフォームの最後に、`p.form-note` という注意書きがあります。もし、この注意書きの 「直前の要素（この場合は `