# :first-child

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

- カテゴリ: 擬似クラス
- URL: https://www.css-dictionary.com/property/pseudo-first-child/

## 構文

```css
:first-child { ... }
```

## Tailwindでは

- バリアント: `first: / last: / only:` を先頭に付けて使う
- `first:border-t-0` → :first-child { border-top-width: 0 }

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 4+ / Firefox 3+ / Safari 3.1+ / Edge 12+

## コード例

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

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

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

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

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

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

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

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

## TIPS

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

## よくある間違い

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

## AIがよく間違えるポイント

:first-childは「親の最初の子」であり、「その型の最初」ではありません。前に別のタグ（例: 見出しの前のアイコンdiv）があると効かず、その場合は:first-of-typeが正解——この取り違えはAI・人間ともに定番です。「最初以外すべて」には li + li や :not(:first-child) のパターンがあります。

## AIへの依頼文例

- 「リスト項目の間だけに区切り線」を、:first-child否定と隣接セレクタの2通りで書いて違いを説明して

## 関連プロパティ

- [pseudo-nth-child](https://www.css-dictionary.com/property/pseudo-nth-child.md)