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

CSSの:last-childセレクタで親の最後の子である

要素にスタイルを適用する方法

CSSの:last-childセレクタ（擬似クラス）を使用すると、親要素の中で最後の子として存在するすべての<p>要素に対してスタイルを適用できます。リストや段落の末尾だけ見た目を変えたい場合などに便利なセレクタです。

:last-childセレクタとは

:last-childは、同じ親要素を持つ兄弟要素の中で「最後に位置する要素」だけを選択できる擬似クラスです。たとえば複数の段落があるページで、最後の段落だけ背景色を変えるといった装飾が簡単に実現できます。

コード例

以下のコードでは、p:last-childを指定することで、body内の最後の<p>要素にオレンジ色の背景を設定しています。

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

実行結果

CSSの:last-childセレクタで親の最後の子である p 要素にスタイルを適用する方法

このコードを実行すると、3つの段落のうち最後の「This is demo text3.」だけがオレンジ色の背景で表示されます。1つ目と2つ目の段落にはスタイルが適用されないため、:last-childセレクタの動作がよくわかります。


  1. CSSの:only-childセレクターを使って、親の唯一の子であるすべての<p>要素にスタイルを適用する方法

    CSSの:only-childセレクターを使用すると、親要素内で唯一の子要素として存在する<p>要素だけを選択し、スタイルを適用することができます。兄弟要素が1つでも存在する場合、その要素は対象外となるため、特定の構造を持つHTMLに対してピンポイントでデザインを指定したいときに非常に便利です。 :only-childセレクターの基本構文 p:only-child { /* スタイルの指定 */ } 実装例 以下のコードでは、2つの<div>要素の中に<p>タグが配置されています。最初の<div>には<p>要素が1つだけ含まれてい

  2. CSSで子要素を選択する方法｜子結合子と子孫結合子の違いを解説

    CSSの子結合子（child combinator）は、親要素の直下にある子要素のみを選択するために使用します。記号「>」を用いて表現します。子結合子の基本的な構文は以下の通りです。セレクタ > セレクタ { プロパティ: /*値*/; }一方、子孫結合子（descendant combinator）は、親要素に含まれるすべての子孫要素（子・孫・ひ孫など、階層の深さに関係なく）を選択します。セレクタ同士を半角スペースで区切って記述します。子孫結合子の基本的な構文は以下の通りです。セレクタ セレクタ { プロパティ: /*値*/; }使用例1：子結合子の基本的な使い方