こんにちは。フロントエンドの現場で長年CSSと格闘してきた者です。
CSSを学び始めると、最初は「色を変える」「配置を整える」だけで精一杯ですよね。でも、少し慣れてくると「リストの最初だけ線を消したいな」とか「最後の項目だけ余白をなくしたい」といった、ちょっとしたこだわりが生まれてくるはずです。
そんな時、多くの初心者が陥るのが「わざわざHTMLに `class=”first”` や `class=”last”` を書きまくる」という罠。実はこれ、CSSの「構造的擬似クラス」を使えば、HTMLを汚さずにスマートに解決できるんです。
今日は、その中でも特に便利で、現場でも毎日使っている `first-of-type` 、 `last-of-type` 、 `only-of-type` という強力なツールたちを、身近な例えと一緒に紐解いていきましょう。
—
1. そもそも「of-type」って何者？
名前が少し堅苦しいですよね。でも、難しく考える必要はありません。
例えば、あなたがスーパーのレジに並んでいると想像してください。
- first-of-type: 「その列の中で、一番最初に並んでいる人」
- last-of-type: 「その列の中で、一番最後に並んでいる人」
- only-of-type: 「その列に、自分一人しか並んでいない状態」
CSSのこの子たちは、HTMLの中に混ざっている他の要素（例えば見出しの中に画像が混ざっていたり、リストの中に広告が入っていたりしても）を無視して、「特定のタグの種類だけを見て判断する」という賢い性質を持っています。これが「of-type」という名前の由来です。
—
2. 実践！「最初と最後」をスマートに扱う
よくあるのが「リストの区切り線」問題です。最後の項目には線がいらないこと、ありますよね。
/ リストの各項目に下線を引く /
li {
border-bottom: 1px solid #ccc;
}
/ 最後のリスト項目だけ、線を消す（魔法のコード） /
li:last-of-type {
border-bottom: none;
}
これだけで、リストの要素が3つだろうが100個だろうが、CSSが勝手に「一番最後のやつだけ」を見つけ出して線を消してくれます。HTMLにいちいちクラスを振る必要なんて、もうないんです。
つまずきポイント：`first-child` との違い
よく比較されるのが `first-child` です。「最初の子」を指すのですが、もしリストの最初に `
` タグなどが混ざっていたら、`first-child` は「あ、一番上はリスト（`li`）じゃないや」と判断して反応しなくなります。
一方 `first-of-type` は、「リスト（`li`）の中で最初のやつ」を探すので、多少HTMLが混雑していても確実に仕事をしてくれます。この「頑固さ」が安心感を生むんですよ。
—
3. 「ぼっち」を見つける `only-of-type`
これはちょっと珍しいですが、知っていると一目置かれる存在です。
例えば、「項目が1つしかない時は、特別な装飾をしたい」というデザインがあったとします。
/ 要素がたった1つしか存在しない時だけ、背景をピンクにする /
p:only-of-type {
background-color: pink;
padding: 10px;
}
お店のメニューで「本日のおすすめが1つしかない時だけ、大きく表示したい」なんていう場面で活躍しますね。誰もいない列に一人で並んでいる人を特別扱いするような、そんな優しい機能です。
—
さあ、エディタを開いて試してみよう
百聞は一見に如かず。ぜひ、以下のコードをコピーして、あなたのエディタで動かしてみてください。
私は最初の子です（太字になります）
私は真ん中の子です
私は最後の子です（グレーになります）
—
最後に：完璧を目指さなくて大丈夫
CSSのセレクタは、最初から全部暗記する必要なんてありません。「あ、そういえばあんな便利なのがあったな」と思い出して、またこのページに戻ってきてくれれば十分です。
現場のプロでも、たまに「あれ？どっちだっけ？」と調べながらコードを書くことは日常茶飯事。大切なのは、「もっと楽に書く方法はないかな？」と工夫しようとするその姿勢です。
皆さんのコーディングが、少しでも快適で楽しいものになりますように。また何かあったらいつでも聞きに来てくださいね！
コメント