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

CSSの:first-childセレクターとは？最初の子要素へスタイルを適用する方法

:first-childセレクターとは

CSSの:first-childセレクターは、親要素の中で「最初の子要素」として出現する要素だけを選択し、スタイルを適用できる擬似クラスです。たとえば、各親要素内の最初の<p>要素にのみ背景色を付けたい場合や、リストの先頭項目だけを目立たせたい場合などに活用できます。

基本的な書き方

以下のように記述すると、親要素の最初の子であるすべての<p>要素にオレンジ色の背景が適用されます。2番目以降に登場する<p>要素には、このスタイルは反映されません。

p:first-child {
  background-color: orange;
}

実装例

次のコードを実行すると、:first-childセレクターの実際の動作を確認できます。

<!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>要素と、<div>内の最初の<p>要素の2か所にオレンジ色の背景が適用されます。一方、<div>内の2番目の<p>要素は「最初の子」ではないため、スタイルの対象外となります。このように:first-childを使うことで、HTMLに追加のクラスを付与することなく、構造に基づいた柔軟なスタイリングが可能になります。

  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