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

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

要素をスタイリングする方法

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

:last-childセレクターは、同じ親要素を持つ子要素の中で最後に位置する要素だけを対象にスタイルを適用できるCSSの擬似クラスです。これを使うことで、「親要素の最後の子として存在するすべての<p>要素」にのみ背景色や文字色などを指定できます。

例えば、リストの最終項目だけを目立たせたい場合や、段落の区切りを視覚的に表現したい場合などに非常に便利なセレクターです。

実装コード例

以下のコードでは、:last-childセレクターを使って、親要素（ここでは<body>）の最後の子である<p>要素にオレンジ色の背景を適用しています。実際にブラウザで実行して動作を確認してみてください。

<!DOCTYPE html>
<html>
   <head>
      <style>
         p:last-of-type {
            background: orange;
         }
      </style>
   </head>
   <body>
      <h2>見出し</h2>
      <p>これはサンプルテキスト1です。</p>
      <p>これはサンプルテキスト2です。</p>
      <p>これはサンプルテキスト3です。</p>
   </body>
</html>

:last-childと:last-of-typeの違い

上記のコード例ではp:last-of-typeが使用されていますが、これは「同じ種類（タグ名）の兄弟要素の中で最後のもの」を対象とします。一方、:last-childは「親要素のすべての子要素の中で最後に位置する要素」を対象とするため、最後の子が<p>以外の場合はマッチしません。

  • :last-child … 要素の種類に関係なく、親の最後の子であれば適用される
  • :last-of-type … 同じタグ名の兄弟要素の中で最後のものであれば適用される

このサンプルのように<p>要素が連続して並んでいる場合は、どちらのセレクターでも同じ結果になります。用途に応じて使い分けるとよいでしょう。

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

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

  2. CSSでhr要素（水平線）のスタイルを設定する方法をわかりやすく解説

    CSSを使ってhr要素（水平線）のスタイルを設定するには、borderプロパティを活用します。hr要素はデフォルトではシンプルな1本の線として表示されますが、border-topやborder-radiusなどを組み合わせることで、実線・破線・二重線・点線・角丸など、さまざまなデザインに自由にカスタマイズできます。以下に、代表的な5種類の水平線スタイルを実装したサンプルコードを紹介します。サンプルコード<!DOCTYPE html> <html> <meta name="viewport" content="width=device-