こんにちは。Web制作の世界へようこそ！
CSSを学び始めて、「`nth-child`とか`first-child`って何だか難しそう…」と、画面の前で少し立ち止まってしまったことはありませんか？
安心してください。最初は誰だって呪文のように感じてしまうものです。でも大丈夫。これらは、CSSが「HTMLという家族の家系図」を読み解くための、とても便利な「目印」に過ぎません。
今日は、そんな構造的疑似クラス（こうぞうてきぎじくらす）という少し硬い名前の仲間たちを、身近な例え話で攻略していきましょう。
—
そもそも「構造的疑似クラス」って何？
Webサイトを作るとき、私たちはHTMLで要素を並べますよね。例えば、リストタグ（`
- `）の中に並んだ「りんご、みかん、ぶどう」という3つのリスト（`
- `）。
CSSの「構造的疑似クラス」とは、「何番目にいるか」「最初か最後か」という、DOM（HTMLのツリー構造）上の『場所』を基準にして、特定の要素に魔法をかける仕組みのことです。
たとえるなら、スーパーのレジ待ちの列で「一番前の人だけ割引」とか「最後尾の人にプレゼント」といったルールを決めるようなものです。名前や中身を見なくても、「その場所にいる」というだけで選べるのが強みなんです。
—
代表的な「目印」たちを使ってみよう
1. `first-child` と `last-child`：並びの端っこを狙い撃ち
「列の最初の人」と「最後の人」を指名する、一番わかりやすいやつです。
/ 最初の項目だけ文字を太くする /
li:first-child {
font-weight: bold;
}/ 最後の項目だけ下の余白をゼロにする（最後の要素の下に余白があるとかっこ悪い時によく使います！） /
li:last-child {
margin-bottom: 0;
}2. `nth-child`：何番目でも自由自在
「2番目だけ」「偶数番目だけ」と指定できる、この界隈のスター選手です。
/ 2番目の要素だけ色を変える /
li:nth-child(2) {
color: red;
}/ 偶数番目（2, 4, 6…）だけ背景を薄いグレーにする（表などで見やすくする時によく使うテクニック！） /
li:nth-child(even) {
background-color: #f4f4f4;
}—
ここでつまずく人へ：「not」と「has」という魔法の杖
少し慣れてくると、「〜以外」や「〜を持っているなら」という条件が欲しくなりますよね。
`not()`：例外を作りたいとき
「全部にスタイルを当てたいけど、最後のやつだけは別！」という時、`not`が便利です。
/ 最後の要素以外に、下のボーダー線を引く /
li:not(:last-child) {
border-bottom: 1px solid #ccc;
}「最後のやつじゃないなら、線を引いてね」という逆転の発想ですね。これを知っているだけで、CSSの記述がぐっとスマートになります。
`has()`：親を動かす最強のカード
これは最近登場した強力な機能です。「中身を見て、親を操作する」ことができます。
/ もしリストの中に「画像」が含まれていたら、その親のリスト全体の背景を変える /
li:has(img) {
background-color: #fff9e6;
}「中身に画像があるやつだけ特別扱いしたい」という時、わざわざHTMLにクラス名を付けなくても、CSSだけで完結できるんです。これは革命的ですよ！
—
現場のアーキテクトからのアドバイス
実務でCSSを書いていると、つい「何でもかんでもクラス名（`class=”item-1″`など）を付けたくなる」という衝動に駆られます。でも、CSSだけで場所を特定できるなら、HTMLを汚さずに済むというメリットがあるんです。
ただし、「場所」に依存しすぎないことも大切です。「3番目が消えたらデザインが崩れた！」なんてことはよくある話。
1. 基本はクラス名で管理する（誰が見てもわかるように）
2. 「最初だけ」「偶数だけ」といったルールは疑似クラスに任せるこの使い分けができるようになると、あなたの書くCSSはぐっとプロの仕上がりに近づきます。
—
最後に
構造的疑似クラスは、HTMLという構造を理解するための地図のようなものです。「ここを動かしたい」と思ったとき、それが「何番目にあるのか」「どういう関係にあるのか」を少し意識するだけで、CSSはもっと自由で楽しいものになります。
最初は完璧に覚えようとしなくて大丈夫です。「あ、確かこんなのがあったな」と思い出したら、この記事を読み返してみてください。
あなたのCSSライフが、少しでも快適で楽しいものになりますように。応援しています！
コメント