CSSの構造的セレクタの罠と、first-of-typeを「使い倒す」ための現場的知見
やあ。現場でCSSを書いていると、どうしても「クラス名でベタ塗り」したくなる衝動に駆られるよな。でも、ちょっと待て。HTMLの構造そのものを「型（Type）」として解釈する`first-of-type`や`last-of-type`を使いこなせれば、君のCSSは驚くほどDRYで、かつメンテナンスしやすいものに生まれ変わる。
今日は、中級者なら絶対に押さえておくべき、この構造的セレクタの「裏側」と「実戦的な活用法」について、少し深い話をしよう。
—
なぜ `nth-child` ではなく `first-of-type` なのか？
多くのエンジニアが混同しがちなのが `:first-child` と `:first-of-type` だ。
- :first-child: 親要素の「最初の子」が、指定したセレクタと一致する場合に適用される。
- :first-of-type: 親要素の中にある「指定した型（タグ名）の最初」に適用される。
これ、何が違うか分かるか？ 例えば、`div`の中にいきなり`h2`がいて、その次に`p`が並んでいる構造を想像してほしい。`:first-child`で`p`を指定しても、最初の子が`h2`なら反応しない。だが、`:first-of-type`なら「その親の中にある最初の`p`」をピンポイントで射抜ける。
ブラウザの挙動の真実：
ブラウザはDOMツリーを走査する際、単に「何番目か」を見ているわけじゃない。「その親要素内で、同じタグ名を持つ要素のうち、インデックスが0番目のものか？」を内部的に評価しているんだ。この「型」ベースの判定は、CMSで流し込まれた不定形のHTMLや、コンポーネントライブラリが吐き出す構造に対して、圧倒的な強さを発揮する。
—
実務で「使える」コード例：リストの境界線問題
現場で一番よくある「余白や境界線の悩み」をこれで解決しよう。リストの各要素の間にだけ線を引く、あるいは最初と最後の余白を消すとき、わざわざ `.is-first` や `.is-last` をJSで付与するのは野暮というものだ。
.list-container {
/ リストの各アイテム /
.list-item {
padding: 1rem 0;
border-top: 1px solid #ccc;
/ 最初の要素だけ上の境界線を消す（綺麗に整える） /
&:first-of-type {
border-top: none;
}
/ 最後の要素だけ下のパディングを消す /
&:last-of-type {
padding-bottom: 0;
}
/ もしリストが1つしかないなら、特別な装飾を当てる /
&:only-of-type {
background: #f9f9f9;
border: 1px solid #ddd;
}
}
}
この書き方の何が素晴らしいかというと、「DOMの構造が変わってもCSS側で修正しなくていい」という点だ。後輩が勝手にリストを増やしても、`last-of-type`は賢く最後の奴を見つけてスタイルを適用してくれる。これぞ、堅牢なCSSアーキテクチャの基本だよ。
—
注意すべき「沼」：型指定の深淵
ただし、一つだけ忠告しておく。`first-of-type`を使う時は、「親要素の中に、その型の要素が混在していないか」を常に意識してくれ。
例えば、`section`の中に`h2`が2つ混在している状態で、`h2:first-of-type`を指定すると、意図せず「セクションのタイトル」と「サブタイトル」の両方にスタイルが当たってしまうことがある。
これを防ぐための鉄則は、「セレクタを絞り込みすぎないが、スコープは明確にする」ことだ。
/ 良い例：コンポーネントスコープ内での使用 /
.card {
h2:first-of-type {
margin-top: 0; / カード内の最初の大見出しだけマージンを詰める /
}
}
/ 悪い例：セレクタが広すぎて予期せぬ衝突を招く /
h2:first-of-type {
font-size: 2rem; / ページ内の至る所で意図しない挙動になる /
}
—
最後に：シニアからのアドバイス
`first-of-type` や `last-of-type` は、魔法じゃない。HTMLの構造への「依存」をコードで表現する技術だ。
もし君が書いているCSSで「クラス名をやたらめったら増やしているな」と感じたら、一度立ち止まって「これは構造で特定できないか？」と考えてみてほしい。クラス名という名前付けのコストを払わずに、HTMLの構造そのものを利用してスタイルを制御する。それこそが、CSSをCSSとして正しく使いこなすプロの仕事だ。
現場で困ったときは、またいつでも聞きに来てくれ。君の書くコードが、少しでも美しくなることを期待しているよ。
コメント