【実務・中級編】 first-child/last-child/only-childの使い分け – CSS実践ガイド

CSSという言語は、一見するとシンプルでとっつきやすい。だが、現場の荒波に揉まれるほど「なぜか意図通りにスタイルが当たらない」「仕様を理解しているはずなのにハマる」という経験を誰もが積むはずだ。

今日は、CSSの構造疑似クラスの基本であり、かつ多くのエンジニアが「なんとなく」で使っているであろう `first-child`, `last-child`, `only-child` について、現場のリアルな視点から紐解いていこうと思う。

—

多くの初心者が陥る罠が、「指定した要素が、その親の中での『最初の要素』である」と過信してしまうことだ。

まず、頭に叩き込んでほしいのは、ブラウザのエンジンがどう解釈しているかという点だ。`li:first-child` と書いたとき、ブラウザは「`li`タグを探す」のではなく、「親要素の最初の子が、たまたま `li` タグだったらスタイルを当てる」という挙動をとる。

もし、`ul`の直下に `div` や `p` が混ざっていたらどうなるか？ `first-child` はあっさりと無視される。これが現場で「CSSが効かない！」と叫ぶ原因の8割だ。

リスト項目やカードUIを実装する際、余白の管理にはこれを使うのがプロの常套手段だ。

/ リストの間隔を管理する鉄板のテクニック /
.list-item + .list-item {
/ 隣接セレクタを使うことで「最初以外」すべてに適用させる /
margin-top: 16px;
}

/ もし最初と最後だけ角丸にしたいならこう書く /
.card-item:first-child {
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}

.card-item:last-child {
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}

—

`only-child` は「親の中に子要素がそれ一つしかない場合」にのみ発火する。これ、正直に言って出番は少ないように思えるかもしれない。だが、「データが1件しかないときだけUIを変化させたい」という要件においては、これ以上の適任はいない。

例えば、ユーザーの投稿一覧で、1件だけのときは全幅表示させ、2件以上のときはグリッドレイアウトにするというようなロジックを、JSなしでCSSだけで完結させることができる。

/ データが1件だけのときは特別なスタイルを当てる /
.post-item:only-child {
grid-column: 1 / -1;
border: 2px solid #3498db;
padding: 24px;
}

—

`first-child` を使っていて「あれ？動かないな」と思ったとき、無理にHTMLを書き換えるのではなく、`first-of-type` に切り替える勇気を持とう。

`first-child` は「最初の子」を指すが、`first-of-type` は「その型の最初」を指す。
例えば、マークアップが以下のような場合：

タイトル

`li:first-child` は何にもマッチしない（`ul`の最初の子は `li` だが、親の `container` から見れば最初の子は `p` だから）。この場合、`li:first-of-type` を使えば、意図通り最初の `li` を捕まえられる。

現場では、「HTML構造はバックエンドのテンプレートエンジンから吐き出されるため、頻繁にタグの順序や種類が変わる」というケースが往々にしてある。CSSセレクタの堅牢性（＝多少のHTMLの変動で崩れない強さ）を意識するなら、どちらの疑似クラスを選ぶべきか、常に一呼吸置いて考えてみてほしい。

—

最後に一つだけアドバイスを。

「`ul > li:first-child:not(.is-hidden)`」のような複雑なセレクタを組むと、後から見た自分が泣くことになる。CSSの構造疑似クラスは強力だが、「多用しすぎない」ことこそが保守性の秘訣だ。

基本は `gap` を使う： 最近のモダンブラウザなら、`first-child` で margin を調整するよりも、親要素に `display: flex; gap: 16px;` を設定する方が圧倒的に美しい。
構造に依存しすぎない： 疑似クラスを多用するほど、マークアップの変更がCSSの修正を強いることになる。

CSSは、ブラウザが解釈する「構造へのラブレター」だ。その手紙が複雑怪奇にならないよう、シンプルで読み解きやすいセレクタを心掛けてほしい。

技術は常にアップデートされる。だが、こうした「ブラウザがどう動くか」という本質的な理解は、どんなフレームワークが流行ろうとも廃れることはない。また現場のどこかで会おう。