CSSの「端っこ」を制する：`:first-child`, `:last-child`, `:only-child` の深淵
現場でコードをレビューしていると、正直「惜しい！」と感じる瞬間がある。特にリストやカードレイアウトにおいて、わざわざJSでDOMを操作したり、全要素に `margin` をかけてから `last-child` で打ち消したりする実装を見ると、「もっとCSSのポテンシャルを信じてくれ！」と肩を叩きたくなるんだ。
今日は、CSSの擬似クラスの中でも、とりわけ「兄弟関係」を支配する `:first-child`, `:last-child`, `:only-child` について、ブラウザの裏側の挙動を交えながら、実戦的な話をしよう。
—
1. なぜ「擬似クラス」という魔法が必要なのか
まず大前提として、CSSは「要素の構造」を理解している。`first-child` や `last-child` は、単なる装飾のセレクタではなく、「DOMツリー上の位置関係に基づいて、ブラウザが動的に適用対象を計算するもの」だ。
ここで中級エンジニアが陥りがちなのが、「HTMLの構造変更に弱いCSS」を書いてしまうこと。例えば、CMSで出力された動的なリストで、中身の数が変動するのに、特定の要素だけを装飾したい時。そんな時、これらの擬似クラスを知っているかどうかで、コードの保守性は天と地ほどの差が出る。
ブラウザの裏側で起きていること
ブラウザはレンダリングエンジンがDOMツリーを走査する際、これらのセレクタに出会うと「親要素の最初の子」や「最後の子」をポインタで即座に特定する。つまり、JSで `querySelectorAll` してループを回すよりも、圧倒的に低コストで高速なんだ。これを活用しない手はないだろう？
—
2. 実践：負債を生まない「端っこ」の扱い方
よくあるのが、リストの境界線問題だ。「全要素に `border-bottom` をつけるけど、最後だけは消したい」。これを力技で解決するのではなく、CSSの仕様に委ねるのがプロの作法だ。
.list-item {
border-bottom: 1px solid #ccc;
padding: 16px 0;
}
/ 最後の要素だけボーダーを消す。これだけで「要素が増減しても」レイアウトは崩れない /
.list-item:last-child {
border-bottom: none;
}
/ 最初の要素の余白調整も、padding-topを打ち消す代わりにこれで制御する /
.list-item:first-child {
padding-top: 0;
}
なぜこれが最強なのか？
もし後から「やっぱり一番上にボーダーが欲しい」と言われても、`:first-child` の指定を消すか書き換えるだけでいい。HTML構造をいじらず、かつJSを一切汚さない。これがCSSアーキテクチャの基本理念だ。
—
3. 意外と盲点？ `:only-child` の使い方
たまに、「要素が1つしかない時だけ特別なスタイルを当てたい」という要件がある。これ、`:first-child` と `:last-child` を両方書こうとする人がいるんだが、実は `:only-child` 一発で解決する。
/ 子要素が1つしかない場合だけ、中央寄せにするという贅沢な仕様 /
.container > .item:only-child {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
background: #f0f0f0;
}
これは、「兄弟がいない」という孤独な状態をCSSが直接判定できる、非常に強力な武器だ。カードコンポーネントのヘッダーや、動的なバッジ表示など、特定の条件下でのみレイアウトを切り替えたい時に重宝する。
—
4. 現場で必ずハマる「罠」への対処法
ここで一つ、現場レベルの「落とし穴」を共有しておく。
「思った通りにスタイルが当たらない」という時、その原因の9割は「兄弟要素の型違い」だ。
`:first-child` は「その親の最初の子」が「指定したセレクタと一致するか」を判定する。つまり、以下のHTMLだと罠にハマる。
タイトル
`.item:first-child` は、`.item` が親要素の「最初の子」でないと反応しない。この仕様を知らずに「CSS効かないバグだ！」と小一時間悩む若手を何度も見てきた。そんな時は、素直に `:first-of-type` を使うか、HTML構造を見直す勇気を持つことだ。
—
最後に：CSSは「宣言」であり「論理」だ
CSSを書くということは、単に色を塗ることじゃない。「この要素はこうあるべきだ」という論理構造をブラウザに伝えることなんだ。
`:first-child`, `:last-child`, `:only-child` を使いこなすことは、DOMの構造を深く理解している証拠だ。コードの行数を減らすことだけが目的じゃない。「HTMLがどう変化しても、CSS側で破綻を防ぐ」。これこそが、中級者からシニアへ駆け上がるための、最も重要なマインドセットだと思ってほしい。
さあ、エディタを開いて、君のプロジェクトの「端っこ」を見直してみよう。きっと、もっと綺麗に書ける場所が残っているはずだぜ。
コメント