皆さん、こんにちは！ CSSの深淵へようこそ。
私は長年、現場でCSSと格闘し、時に笑い、時に涙を流してきた生粋のフロントエンドスペシャリストです。この道は本当に奥深く、まるでパズルのようであり、魔法のようでもあります。

「CSSって、なんか難しそう…」
「コードを書いても、思った通りにならないことが多くて挫折しそう…」

そう思っている方も、どうか安心してください。
大丈夫、それはCSSの奥深さに触れ始めた証拠です。誰もが通る道ですし、私だって最初は「えいやっ！」と試行錯誤の連続でしたからね。

今日は、そんな皆さんの悩みを少しでも軽くし、「なるほど！」と膝を打ってもらえるような、とっておきのCSSのワザをご紹介します。今回のお題は、`:last-of-type`という、ちょっとだけ聞き慣れないかもしれない疑似クラスです。

—

魔法のキーワード「`:last-of-type`」って、一体何者？

「疑似クラス」なんていう言葉を聞くと、もうそれだけで身構えてしまいますよね。でも、安心してください。これはCSSの世界で使える、ちょっと特別な「指名手配書」みたいなものだと思ってください。

私たちがWebページを作るとき、たくさんの部品（要素）を並べます。例えば、文章の段落（`

`）、見出し（`

`）、リストの項目（` `）など、様々な役割を持った要素が積み重なって一つのページになります。 その中で、「同じ種類の要素がいくつか並んでいるときに、その中で一番最後のやつだけを特別扱いしたい！」と思うこと、ありませんか？ 例えば、 お店の商品リストで、最後の商品の値段だけ赤くしたい。 ブログ記事の段落で、一番最後の段落だけ、ちょっと余白を広げたい。 コメント欄で、一番最後のコメントにだけ「最新！」マークをつけたい。 こんな時に大活躍するのが、今回ご紹介する`:last-of-type`なんです。 イメージとしては、スーパーの棚に並んだ同じ種類のパンを想像してみてください。 食パン、メロンパン、クロワッサンがずらーっと並んでいます。 `:last-of-type`は、「はい、パン屋さん、この棚にある『メロンパン』の中で、一番右端のやつをください！」と指定するようなものです。 そう、ポイントは「同じ種類の」という部分。 たくさんの要素がごちゃ混ぜになっていても、`:last-of-type`は賢く、指定した「種類（タグ名）」の要素だけを数え上げて、その末尾の要素を見つけ出してくれるんです。 — ちょっと待って！「`:last-child`」とはどう違うの？

CSSを少し触ったことがある方なら、「あれ？`:last-child`ってのもあったような…」と思うかもしれませんね。まさに、ここが初学者がつまずきやすい、そして「なるほど！」ポイントの一つです！

`:last-of-type`と`:last-child`、どちらも「最後」という言葉がついていますが、その「最後」の意味がちょっとだけ違います。

例え話で考えてみましょう。

あなたのお家に、こんな家族構成があったとします。

• お父さん（`
  `）
• 長男（`

  `要素）

• 長女（``要素）
• 次男（`

  `要素）

• 末っ子（`
  `要素）

この家族の中で、

• `:last-child` は、お父さん（親要素）から見て、「誰でもいいから、一番最後に生まれた子」を指します。この場合は「末っ子（`
  `要素）」ですね。
• `:last-of-type` は、お父さん（親要素）から見て、「長男や次男と同じ『男の子（`

  `要素）』の中で、一番最後に生まれた子」、あるいは「長女と同じ『女の子（``要素）』の中で、一番最後に生まれた子」というように、「種類」を限定して探します。

• もしあなたが「`

  :last-of-type`」と指定したら、次男（`

  `要素）が選ばれます。なぜなら、`

  `要素の中で一番最後だからです。

• もしあなたが「`:last-of-type`」と指定したら、長女（``要素）が選ばれます。なぜなら、``要素は彼女一人だけで、それが最後だからです。

どうでしょう？ ちょっとイメージが湧いてきましたか？
`:last-child`は「親要素の中の、本当に一番最後の要素」、`:last-of-type`は「親要素の中の、指定したタグ名を持つ要素の中で一番最後の要素」。
この違いを頭の片隅に置いておくと、CSSの表現力がグッと広がりますよ！

—

実際に使ってみよう！コードで確認

さあ、理屈は分かった！それなら手を動かしてみましょう。
以下のHTMLとCSSをコピーして、ご自身の環境で試してみてください。
きっと、「なるほど、こういうことか！」と実感できるはずです。

HTMLコード (`index.html`)

:last-of-type のデモンストレーション

CSSコード (`style.css`)

/ 全体の基本的なスタイル /
body {
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
margin: 20px;
background-color: #f4f7f6;
color: #333;
}

h1 {
color: #2c3e50;
text-align: center;
margin-bottom: 40px;
}

.content-box {
background-color: #ffffff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
margin-bottom: 40px;
}

.content-box h2 {
color: #3498db;
border-bottom: 2px solid #ecf0f1;
padding-bottom: 10px;
margin-top: 0;
}

.content-box p {
margin-bottom: 15px;
}

.content-box span {
display: block; / span要素をブロック要素にして、改行されるようにします /
margin-bottom: 10px;
color: #555;
}

/ ここからが :last-of-type の魔法です！ /

/ .content-box の中の、p要素の中で一番最後のp要素にスタイルを適用 /
.content-box p:last-of-type {
color: #e74c3c; / 文字色を赤くします /
font-weight: bold; / 太字にします /
border-bottom: 2px dashed #e74c3c; / 破線の下線を引きます /
padding-bottom: 5px; / 下線との間に少し余白をとります /
margin-bottom: 25px; / 次の要素との間に大きめの余白をとります /
}

/ .content-box の中の、span要素の中で一番最後のspan要素にスタイルを適用 /
.content-box span:last-of-type {
background-color: #f9f9e2; / 背景色を薄い黄色にします /
padding: 8px; / 内側の余白を追加します /
border-left: 5px solid #f39c12; / 左側に太いボーダーをつけます /
margin-bottom: 20px;
}

.list-container {
background-color: #e8f6f3;
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.list-container h3 {
color: #27ae60;
margin-top: 0;
}

.list-container ul {
list-style: none; / リストの点（デフォルトのマーカー）を消します /
padding: 0;
margin-bottom: 20px;
}

.list-container li {
background-color: #ffffff;
padding: 10px 15px;
margin-bottom: 8px;
border-radius: 5px;
border: 1px solid #d1e9e2;
transition: transform 0.2s ease; / ホバー時のアニメーション効果 /
}

.list-container li:hover {
transform: translateX(5px); / ホバーで少し右に移動します /
}

/ .list-container の中の、li要素の中で一番最後のli要素にスタイルを適用 /
.list-container li:last-of-type {
background-color: #27ae60; / 背景色を緑色にします /
color: #ffffff; / 文字色を白にします /
font-weight: bold; / 太字にします /
border-color: #27ae60; / ボーダーの色も緑にします /
box-shadow: 0 2px 10px rgba(39, 174, 96, 0.3); / 影をつけます /
margin-top: 15px; / 上に少し余白をとります /
}

/ .list-container の中の、p要素の中で一番最後のp要素にスタイルを適用 /
.list-container p:last-of-type {
font-style: italic; / 斜体にします /
color: #888; / 色を少し薄くします /
text-align: right; / 右寄せにします /
margin-top: 25px; / 上に大きめの余白をとります /
padding-top: 10px; / 上に内側の余白をとります /
border-top: 1px dotted #ccc; / 上に点線ボーダーを引きます /
}

このコードをブラウザで開いてみてください。
`.content-box`の中の3番目の`

`要素と、2番目の``要素、
そして`.list-container`の中の最後の`