:first-child

擬似クラス

親要素の最初の子要素を選択する擬似クラスです。リストの最初の項目や、カードレイアウトの最初の要素など、特定の位置にある要素にスタイルを適用する際に便利です。

構文

Syntax

:first-child { ... }

コード例

例 1

li:first-child {
  border-top: 2px solid #3b82f6;
  font-weight: bold;
}

実行結果

リストアイテム 1 ← 最初の要素
リストアイテム 2
リストアイテム 3
リストアイテム 4
リストアイテム 5

li:first-child → 最初の項目に上枠線と太字

リストの最初の項目に上枠線と太字を適用

例 2

.card:first-child {
  margin-left: 0;
}

実行結果

カード 1

左マージン: 0

カード 2

左マージン: 1rem

カード 3

左マージン: 1rem

カード 4

左マージン: 1rem

.card:first-child → 最初のカードの左マージンを削除

カードグリッドの最初のカードの左マージンを削除

例 3

p:first-child {
  margin-top: 0;
}

実行結果

p:first-child → 最初の段落の上マージンを削除

最初の段落です。上マージンが削除されています。

2番目の段落です。通常の上マージンがあります。

3番目の段落です。通常の上マージンがあります。

コンテナ内の最初の段落の上マージンを削除してレイアウト調整

コンテナ内の最初の段落の上マージンを削除

例 4

.nav-item:first-child {
  border-radius: 8px 0 0 8px;
}

実行結果

ナビ 1

ナビ 2

ナビ 3

ナビ 4

.nav-item:first-child → 最初のナビゲーションアイテムに左側の角丸

ナビゲーションの最初のアイテムに左側の角丸を適用

💡 TIPS

レイアウトの調整やデザインの統一に非常に便利。:nth-child(1)と同じ効果だが、より読みやすい。マージンやパディングの調整によく使われる。

⚠️ よくある間違い

親要素の最初の子要素であることが条件。他の要素が間にあると適用されない。:first-of-typeとの違いも理解しよう。

ブラウザサポート

IE7+, 全モダンブラウザ

:first-child

構文

コード例

例 1

例 2

例 3

例 4

💡 TIPS

⚠️ よくある間違い

関連プロパティ

ブラウザサポート