CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

【CSS】last-of-typeセレクターの役割と使い方をわかりやすく解説

:last-of-typeセレクターとは

CSSの:last-of-typeセレクターは、同じ親要素を持つ兄弟要素の中で、指定したタイプ（タグ名）の最後の要素に対してスタイルを適用する疑似クラスです。例えば、親要素内に複数の<p>要素がある場合、そのうち最後の<p>要素だけにスタイルを適用したいときに活用できます。

:last-childセレクターとの違い

よく似た疑似クラスに:last-childがありますが、両者には重要な違いがあります。:last-childは「親要素の最後の子要素」であることが条件なのに対し、:last-of-typeは「同じタイプの要素の中で最後」であれば適用されるため、条件がより柔軟です。例えば、親要素の最後の子が<div>であっても、その手前にある最後の<p>要素には:last-of-typeが適用されます。

実装例

以下のコードでは、:last-of-typeセレクターを使って、最後の<p>要素の背景色をオレンジ色に変更しています。

<!DOCTYPE html>
<html>
   <head>
      <style>
         p:last-of-type {
            background: orange;
         }
      </style>
   </head>
   <body>
      <h2>Heading</h2>
      <p>This is demo text1.</p>
      <p>This is demo text2.</p>
      <p>This is demo text3.</p>
   </body>
</html>

実行結果

このコードをブラウザで実行すると、「This is demo text3.」と表示されている最後の段落のみ背景がオレンジ色になります。1つ目と2つ目の段落にはスタイルが適用されません。

このように:last-of-typeセレクターを使うことで、HTMLに余分なクラスを追加することなく、特定タイプの最後の要素だけを簡単に装飾できます。リストや記事の最終段落のスタイリングなど、実務でも頻繁に活用される便利なセレクターです。

  1. CSSの:nth-last-of-type(n)セレクターとは？後ろから数えて要素を指定する方法

    CSSの:nth-last-of-type(n)セレクターは、親要素の中で同じ種類の兄弟要素を末尾（最後の子）から数えて、指定した順番に該当する要素を選択するための擬似クラスです。 例えば「:nth-last-of-type(2)」を指定すると、各親要素内で後ろから2番目に位置する<p>要素だけがスタイルの対象になります。通常の:nth-of-type()が先頭から数えるのに対し、:nth-last-of-type()は逆方向からカウントする点が大きな特徴です。 :nth-last-of-type(n)セレクターの基本構文 要素:nth-last-of-type(n) { /*

  2. CSSの:nth-last-child(n)セレクターとは？使い方と実装例を解説

    CSSの:nth-last-child(n)セレクターとは :nth-last-child(n)は、CSSの擬似クラスの一つで、親要素の子要素を末尾（最後の子）から数えてn番目に該当する要素を選択するためのセレクターです。 例えば、段落やリスト項目が多数並んでいる場合に、「先頭から」ではなく「最後から何番目か」という位置を基準にスタイルを適用したいときに便利です。要素の総数が動的に変化するコンテンツでも、末尾からの位置指定なら安定したデザイン制御が可能になります。 基本的な書き方 p:nth-last-child(4) { background: blue; color: white