親要素の最初の子要素を選択する擬似クラスです。リストの最初の項目や、カードレイアウトの最初の要素など、特定の位置にある要素にスタイルを適用する際に便利です。
:first-child { ... }バリアント first: / last: / only: を先頭に付けて使います
| first:border-t-0 | :first-child { border-top-width: 0 } |
li:first-child {
border-top: 2px solid #3b82f6;
font-weight: bold;
}リストの最初の項目に上枠線と太字を適用
.card:first-child {
margin-left: 0;
}カードグリッドの最初のカードの左マージンを削除
p:first-child {
margin-top: 0;
}最初の段落です。上マージンが削除されています。
2番目の段落です。通常の上マージンがあります。
3番目の段落です。通常の上マージンがあります。
コンテナ内の最初の段落の上マージンを削除
.nav-item:first-child {
border-radius: 8px 0 0 8px;
}ナビゲーションの最初のアイテムに左側の角丸を適用
レイアウトの調整やデザインの統一に非常に便利。:nth-child(1)と同じ効果だが、より読みやすい。マージンやパディングの調整によく使われる。
親要素の最初の子要素であることが条件。他の要素が間にあると適用されない。:first-of-typeとの違いも理解しよう。
:first-childは「親の最初の子」であり、「その型の最初」ではありません。前に別のタグ（例: 見出しの前のアイコンdiv）があると効かず、その場合は:first-of-typeが正解——この取り違えはAI・人間ともに定番です。「最初以外すべて」には li + li や :not(:first-child) のパターンがあります。
「リスト項目の間だけに区切り線」を、:first-child否定と隣接セレクタの2通りで書いて違いを説明して
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。