:first-child と :last-child を“構造から理解する”
:first-child と :last-child は、CSS の中でも 「並びの中で一番最初／最後の要素だけにスタイルを当てる」 とても便利な疑似クラスです。
リスト、カード一覧、記事の段落など、繰り返し要素のデザインで大活躍します。
初心者でも迷わないように、CSS と Tailwind CSS の両方で丁寧に解説します。
:first-child と :last-child の基本
:first-child の基本形
.container p:first-child {
color: red;
}
これは「.container の中で 最初の <p> にだけ適用されます。
HTML
<div class="container">
<p>最初の段落（赤）</p>
<p>2つ目の段落</p>
</div>
:last-child の基本形
.container p:last-child {
color: blue;
}
これは「.container の中で 最後の <p> にだけ適用されます。
HTML
<div class="container">
<p>最初の段落</p>
<p>最後の段落（青）</p>
</div>
深掘り：first-child / last-child が効かないケース
重要ポイント：「その親の中で本当に最初／最後か？」が判定基準
例えば次のような HTML では注意が必要です。
<div class="container">
<h2>タイトル</h2>
<p>段落1</p>
<p>段落2</p>
</div>
この場合、
.container p:first-child { … }
は 効きません。
理由
→ 最初の子は <h2> であり、<p> ではないから。
first-child は「そのタグの中で最初の p」ではなく「親の中で最初の子が p かどうか」を見ます。
Tailwind CSS での first-child / last-child
Tailwind では疑似クラスを プレフィックス で表現します。
<div class="container">
<p class="first:text-red-500">最初の段落</p>
<p class="last:text-blue-500">最後の段落</p>
</div>
Tailwind の first: last: は CSS の :first-child :last-child と同じ動きをします。
よく使う UI パターン
最初の要素だけ余白をなくす
CSS版
.card p:first-child {
margin-top: 0;
}
Tailwind版
<p class="first:mt-0 mt-4">テキスト</p>
最後の要素だけ余白をなくす
CSS版
.card p:last-child {
margin-bottom: 0;
}
Tailwind版
<p class="last:mb-0 mb-4">テキスト</p>
カード一覧の最初だけ背景色を変える
CSS版
.card:first-child {
background: #f0f8ff;
}
Tailwind版
<div class="card first:bg-blue-50">カード1</div>
<div class="card">カード2</div>
<div class="card">カード3</div>
first-child / last-child の“つまずきポイント”を深掘り
1. 「タグの種類」は関係ない
次のような HTML でも…
<div class="box">
<h3>タイトル</h3>
<p>段落</p>
</div>
.box p:first-child { … }
は効きません。
最初の子が p でないから。
2. 空白やコメントも子として扱われることがある
極端な例ですが…
<div class="box">
<!-- コメント -->
<p>段落</p>
</div>
ブラウザによってはコメントが子として扱われ、p:first-child が効かないことがあります。
実務ではあまり起きませんが、知っておくと安心です。
3. nth-child と混同しやすい
:first-child は 「最初の子がそのタグかどうか」:nth-child(1) は 「1番目の子」
似ているようで違います。
例題で理解を深める
例題：記事本文の最初の段落だけ大きくする
CSS版
.article p:first-child {
font-size: 20px;
font-weight: bold;
}
HTML
<div class="article">
<p>最初の段落（大きい）</p>
<p>2つ目の段落</p>
</div>
Tailwind版
<div class="article">
<p class="first:text-xl first:font-bold">
最初の段落（大きい）
</p>
<p>2つ目の段落</p>
</div>
例題：カードリストの最後のカードだけ余白をなくす
CSS版
.card:last-child {
margin-bottom: 0;
}
Tailwind版
<div class="card last:mb-0 mb-4">カード1</div>
<div class="card last:mb-0 mb-4">カード2</div>
<div class="card last:mb-0 mb-4">カード3</div>
Tailwind は「全てのカードに書く」必要がありますが、
その分 HTML の構造に依存しないというメリットがあります。
まとめ：:first-child と :last-child を使いこなすコツ
本質
- 親の中で 本当に最初／最後の子 かどうかで判定される
- タグの種類は関係ない
- 余白調整や強調にとても便利
Tailwind の強み
first:last:で簡単に指定できる- CSS と同じ動きなので迷わない
実務での使いどころ
- カード一覧の最初／最後の余白調整
- 記事本文の最初の段落を強調
- リストの最後の要素だけ線を消す
