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

CSSの:last-childセレクターとは？最後の子要素をスタイリングする方法

CSSの:last-childセレクターとは？

CSSの:last-childセレクターは、親要素の中で最後の子要素として存在する要素にだけスタイルを適用できる擬似クラスです。リストや段落など、同じ種類の要素が複数並んでいる場合に「最後の要素だけ」見た目を変えたいときに非常に便利です。

基本構文

:last-childセレクターは次のように記述します。

p:last-child {
  /* 最後の子要素に適用するスタイル */
}

実装例：最後の段落だけ背景色を変更する

以下のコードでは、親要素（body）内で最後の子要素となっている<p>タグに対して、オレンジ色の背景を適用しています。ブラウザで表示すると、1つ目と2つ目の段落は通常どおり表示され、3つ目（最後）の段落のみ背景がオレンジ色になります。

<!DOCTYPE html>
<html>
  <head>
    <style>
      p:last-child {
        background: orange;
      }
   </style>
 </head>
 <body>
    <p>これはデモテキスト1です。</p>
    <p>これはデモテキスト2です。</p>
    <p>これはデモテキスト3です。</p>
 </body>
</html>

:last-childセレクターを使う際のポイント

  • 親要素との関係が重要： 対象になるのは「同じタグの最後」ではなく、「親要素から見て最後の子要素」である点に注意しましょう。最後の子が別のタグの場合、意図した要素にスタイルが適用されません。
  • 主な活用シーン： リストの最終項目だけ下線を消す、カード型レイアウトの最後の要素の余白を調整する、といった場面でよく使用されます。
  • 関連するセレクター： 最初の子要素には:first-child、特定の順番の子要素には:nth-child()を組み合わせると、さらに柔軟なスタイリングが可能です。

このように:last-childセレクターを活用すれば、HTML側に追加のクラスを付けることなく、CSSだけで効率的かつスマートにデザインを制御できます。

  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