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

CSSの:first-child疑似クラスの使い方を徹底解説！具体例つき

:first-child疑似クラスとは

CSSの:first-child疑似クラスを使うと、ある要素の「最初の子要素」となっている要素に対して、特別なスタイルを適用できます。たとえば、親要素の中で最初に登場する段落だけにインデントを付けたり、リストの先頭項目だけ色を変えたりといった装飾が簡単に実現できます。

基本的な書き方

セレクタは次のように記述します。

親要素 > 子要素:first-child {
  /* 最初の子要素に適用するスタイル */
}

実装例

以下のコードを実行して、:first-child疑似クラスの動作を確認してみましょう。

<html>
   <head>
      <style>
         div > p:first-child
         {
            text-indent: 25px;
         }
      </style>
   </head>
   <body>
      <div>
         <p>First paragraph in div. This paragraph will be indented</p>
         <p>Second paragraph in div. This paragraph will not be indented</p>
      </div>
         <p>But it will not match the paragraph in this HTML:</p>
      <div>
         <h3>Heading</h3>
         <p>The first paragraph inside the div. This paragraph will not be effected.</p>
      </div>
   </body>
</html>

コードの解説

この例では、div > p:first-childというセレクタを使用しています。これは「div要素の直下にある、かつ最初の子要素であるp要素」にのみスタイルを適用することを意味します。

スタイルが適用されるケース

最初のdiv要素では、p要素が最初の子要素として配置されているため、1つ目の段落にtext-indent: 25px;（25pxのインデント）が適用されます。2つ目の段落は最初の子要素ではないため、スタイルの対象外となります。

スタイルが適用されないケース

2つ目のdiv要素では、最初の子要素がp要素ではなくh3要素（見出し）です。:first-childは「同じ種類の要素の中で最初」という意味ではなく、「親要素の最初の子要素そのもの」に一致する必要があるため、このdiv内のp要素にはスタイルが適用されません。これは初心者がつまずきやすいポイントなので、注意しておきましょう。

まとめ

:first-child疑似クラスは、親要素の最初の子要素を正確に指定できる便利なセレクタです。「要素の種類が最初」ではなく「親から見て最初の子である」ことが条件になる点を理解しておくと、意図した通りのスタイリングができるようになります。同様の疑似クラスには、最後の子要素を指定する:last-childや、n番目の子要素を指定できる:nth-child()などもあるので、あわせて覚えておくとよいでしょう。

  1. CSSのalign-contentプロパティにflex-start値を指定する方法

    CSSのalign-contentプロパティに値flex-startを指定すると、フレックスコンテナ内の複数行のアイテムをコンテナの先頭（開始位置）に寄せて配置できます。この値は、flex-wrap: wrap;などによってフレックスアイテムが複数行に折り返されている場合に有効になります。各行は互いに詰められ、クロス軸方向の開始側にまとめて配置されます。使用例以下のコードを実行すると、align-content: flex-start;の動作を確認できます。<!DOCTYPE html> <html>    <head> &nb

  2. CSSの:first-child疑似クラスとは？基本構文と実用的なサンプルコードを解説

    CSSの:first-child疑似クラスは、ある親要素の中で「最初の子要素」に該当する要素を選択するためのセレクタです。リストの先頭項目だけ背景色を変えたい場合や、テーブルの左端のセルだけ罫線を消したい場合など、細かいスタイル調整に役立ちます。 基本構文 :first-child疑似クラスの基本的な書き方は以下のとおりです。 :first-child {     /* スタイル宣言 */ } このセレクタは、対象となる要素が親要素の最初の子要素である場合にのみ適用されます。なお、:first-childは:nth-child(1)と同じ意味を持つ