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

CSSの:first-childセレクターで親の最初の子である

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

親要素の最初の子として存在するすべての <p> 要素にスタイルを適用したい場合は、CSSの :first-child セレクターを使用します。

このセレクターは、指定した要素がその親要素の中で最初の子要素である場合にのみマッチします。兄弟要素の中で先頭に位置するかどうかが判定基準となるため、途中に別の要素（見出しなど）が挿入されていると、その後ろにある同じ種類の要素は対象外になります。

基本的な書式

p:first-child {
  /* ここにスタイルを記述 */
}

実装例

以下のコードを実行すると、:first-childセレクターの動作を確認できます。親要素（div）の最初の子である段落だけがオレンジ色の背景で表示されます。

<!DOCTYPE html>
<html>
   <head>
      <style>
         p:first-child {
            background-color: orange;
         }
      </style>
   </head>
   <body>
      <h1>見出し</h1>
      <p>これはサンプルテキストです。</p>
      <div>
         <p>これはサンプルテキストです。親divの最初の子要素です。</p>
         <p>これはサンプルテキストですが、最初の子ではありません。</p>
      </div>
   </body>
</html>

出力結果のポイント

  • body直下の<p>要素：body内で最初の子ではないため（前に<h1>がある）、背景色は適用されません。
  • div内の1つ目の<p>要素：親divの最初の子なので、オレンジ色の背景が適用されます。
  • div内の2つ目の<p>要素：最初の子ではないため、スタイルは適用されません。

なお、特定のクラスやIDを持つ要素だけを対象にしたい場合は、「.example:first-child」のようにセレクターを組み合わせることも可能です。また、要素の種類に関係なく最初の子を指定したい場合は「*:first-child」または単に「:first-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：子結合子の基本的な使い方