CSS :first-child パseudoクラス

定義と使用方法

CSS :first-child パseudoクラスは、親要素の最初の子要素として選択される要素（兄弟要素のグループの中で）を選択するために使用されます。

例

例1

親要素の最初の子要素として選択される各<p>要素のスタイルを選択し、設定します：

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

実際に試してみてください

例2

親要素の最初の子要素として選択される各<i>要素のスタイルを選択し、設定します：

i:first-child {
  background: yellow;
}

実際に試してみてください

例3

リスト内の最初の<li>要素を選択し、スタイルを設定します：

li:first-child {
  background: yellow;
}

実際に試してみてください

例4

各<ul>要素の最初の子要素を選択し、スタイルを設定します：

ul > :first-child {
  background: yellow;
}

実際に試してみてください

CSS文法

:first-child {
  css宣言;
}

技術的詳細

ブラウザのサポート

テーブルの数字は、そのパseudoクラスを完全にサポートする最初のブラウザのバージョンを指定しています。