こんにちは！フロントエンドの現場で日々CSSと格闘しているエンジニアです。
CSSを学び始めると、最初は「色を変える」「配置を変える」といった基本的な操作が楽しくてたまらないですよね。でも、いざページを作り込んでいくと、「リストの最初の項目だけ強調したい」「最後の人だけは線を消したい」といった、「特定の場所にある要素だけを操作したい」という切実な悩みが出てきます。
そんな時、CSSの「擬似クラス（ぎじクラス）」という武器を知っていると、世界が一気に変わります。今回は、数ある中でも特に便利で、ちょっとした「気遣い」をスマートに実現できる `:first-of-type`、`:last-of-type`、`:only-of-type` について、現場の空気感を交えながら解説していきますね。
—
擬似クラスは「名札」を探すセンサー
まず、難しく考えないでくださいね。「擬似クラス」なんて名前がついていますが、要は「CSSにお願いする、特定の条件を探すセンサー」だと思ってください。
例えば、クラス名をいちいちHTMLに書くのは面倒ですよね？ 100個あるリストの全部に `class=”item-first”` なんて書いていたら、修正のたびに地獄を見ます。そこでこのセンサーの出番です。
1. `:first-of-type`：そのグループの「一番乗り」を狙い撃ち
一番上にある要素だけデザインを変えたい時、これを使います。
例え話：
カフェで並んでいるお客さんを想像してください。注文カウンターに並んでいる人たちの中で、「一番最初に並んでいる人」だけにお店からのサービス券を渡すようなイメージです。
/ リストの中の、最初の「pタグ」だけ文字を赤くする /
p:first-of-type {
color: red;
font-weight: bold;
}
「あれ？普通の `first-child` と何が違うの？」と疑問に思うかもしれません。実はここが一番つまずきやすいポイント。
`first-child` は「親要素の中にある一番目の子供」を指しますが、`:first-of-type` は「その種類の中で一番最初の人」を指します。たとえ途中に別のタグが混ざっていても、「pタグの中での最初」をちゃんと見つけてくれるんです。賢いですよね！
—
2. `:last-of-type`：一番最後の人に「さよなら」の挨拶を
リストの下に線を引くデザイン、よくありますよね。でも、一番下の要素にまで線を引くと、なんだか締まりが悪い……。そんな時に、最後だけ線を消すために使います。
ul li:last-of-type {
border-bottom: none; / 最後だけ線を消す！これでスッキリ /
}
これも `:first-of-type` と同じく、「その種類の中で最後の人」を指します。これを知っておくだけで、わざわざ最後の要素に `last-item` というクラスを付ける手間が省けます。コードが美しくなる瞬間ですね。
—
3. `:only-of-type`：ぼっちな要素を見つける名探偵
これはちょっと特殊で、「仲間が一人もいない、たった一人の要素」を指します。
例え話：
教室にたくさんの生徒が座っている中で、一人だけポツンと座っている転校生を見つけるような感覚です。
/ pタグがその場所でたった一つしかない場合だけ反応する /
p:only-of-type {
background: #fff3cd; / 目立つように背景色をつける /
}
「いつ使うの？」と思うかもしれませんが、動的にコンテンツを流し込むWebサイトで、「記事の中に画像が1枚しかない時は大きく表示したい」といった、条件付きのデザイン調整で真価を発揮します。
—
現場でつまずかないための「お守り」アドバイス
ここまで読んで「なんだか便利そう！」と思っていただけたら嬉しいです。最後に、現場で実際にコードを書く時のちょっとしたコツを伝授します。
- 「何に対して」適用するか意識する
`:first-of-type` を使う時は、必ず「誰（親要素）の中の」「何のタグ（型）」なのかを意識してください。「`div` の中の `p` の最初のやつ」というように、関係性を整理すると迷子になりません。
- HTMLの構造が命
これらの擬似クラスはHTMLの構造に依存します。もし思ったように動かない時は、HTMLの階層がどうなっているか、一度デベロッパーツールで確認してみてください。「思っていた親要素と違った！」なんてことは、プロでもよくあるミスです。
—
最後に：CSSは「おもてなし」の道具
いかがでしたか？ `:first-of-type` たちを使いこなせると、HTMLを汚さずに、CSSだけでレイアウトを整えることができます。これは結果的に、メンテナンスしやすく、誰が読んでも理解しやすい「優しいコード」に繋がります。
CSSを覚えるのは、Webサイトという「お店」を、訪れる人にとって居心地の良い場所にするための「おもてなし」を学ぶようなものです。
最初は失敗して当たり前です。思い通りにいかなくて悩んだ時間は、すべてあなたの「引き出し」になります。ぜひ、ご自身の書いているコードで、この子たちを試してみてくださいね。応援しています！
コメント