こんにちは！フロントエンドの現場を長年フラフラと……もとい、渡り歩いてきたチーフアーキテクトの私です。
CSSを書き始めた頃って、いろんなセレクタ（要素を指定する魔法の呪文みたいなもの）が出てきて頭がパンクしそうになりますよね。「クラス名？ ID？ 擬似クラス？ なんじゃそりゃ！」と、黒い画面（エディタ）をそっと閉じたくなる気持ち、痛いほどよく分かります。
でも、大丈夫ですよ。今日お話しする`:not()`関数（否定疑似クラス）は、あなたのそのモヤモヤをスッキリ解消してくれる、とっても頼りになる「お助けアイテム」です。
難しい専門用語はなるべく置いておいて、身近な例えからゆっくり紐解いていきましょうか。コーヒー片手に、気楽に読んでいってくださいね。
—
1. `:not()` って一体なに？（身近な例えでお話しします）
突然ですが、お買い物のときを想像してみてください。
スーパーの棚に、いろんな種類のりんごが並んでいます。「赤いりんご」もあれば「黄色いりんご」もある。あるいは、ちょっと傷んでしまったものもあるかもしれません。
ここで、あなたが店員さんに「赤いりんご『以外』のぜんぶを、こちらのカゴに入れてください！」とお願いしたとします。
このとき、店員さんの頭の中はどうなっているでしょうか？
1. 「りんご」を見る。
2. 「あれ、これ赤くないな？」と確認する。
3. 赤くないなら（黄色だったり青かったりしたら）、カゴに入れる！
CSSの `:not()` も、これと全く同じことをやっているんです。
英語の “not（〜ではない）” の通り、「カッコの中に書いた条件に『一致しない』ものだけを選び出す」という、ちょっと天邪鬼（あまのじゃく）だけど最高に便利な機能なんです。
—
2. なぜ `:not()` が必要とされるの？（実務でのリアルな悩み）
Webサイトを作っていると、こんな場面によく遭遇します。
> 「メニューのリスト（`
昔のCSSだったら、これ結構めんどくさかったんです。
一度すべてのリストにボーダーをつけたあと、「あ、最後だったわ」という要素を指定して、`border: none;` でわざわざ消してあげる……という、いわゆる「上書きの儀式」が必要でした。
「なんかスマートじゃないな……最初から『最後以外』を指定できればいいのに！」
そんな現場のエンジニアたちの密かな願いを叶えてくれるのが、まさにこの `:not()` なんです。
—
3. 基本の書き方を見てみよう
百聞は一見にしかず、実際にコードを見てみましょう。
さっきの「最後のリスト以外にボーダーをつけたい」という例を、`:not()` を使って書いてみますね。
/ 「最後の子要素（:last-child）」『ではない』ものを選ぶ！ /
.menu-list li:not(:last-child) {
border-right: 1px solid #ccc; / 右側にうすい線を引くよ /
}
これだけで、上から3番目までの「ホーム」「サービス」「実績紹介」には右側に線がつき、一番最後のお問い合わせのところだけ、綺麗に線が消えてくれます。わざわざ打ち消しのコードを書く必要がなくて、とっても気持ちがいいですよね！
—
4. 初学者がつまずきやすいポイントと、温かいアドバイス
`:not()` を使い始めると、つい楽しくていろんな条件を詰め込みたくなります。ここで、初心者の頃に誰もが通る「ちょっとした落とし穴」をこっそりシェアしておきますね。
つまずきポイント：カッコの中に「複雑すぎる指定」を入れない
`:not()` の中には、クラス名やHTMLタグ、他の疑似クラス（`:hover` や `:disabled` など）を入れることができます。
しかし、あまりに複雑な条件を入れ子にすると、後からコードを見たときに「あれ、これっていったい何を選ぼうとしてるんだっけ……？」と、自分自身が迷子になってしまいます。
【チーフからのアドバイス】
最初はシンプルに行きましょう。「〜じゃないもの」という引き算の思考は強力ですが、多用しすぎるとCSSの仕組みが複雑になります。「これ、普通のクラスで指定した方が分かりやすいかも？」と思ったときは、素直に新しいクラスをつけてあげるのも立派なプロの選択ですよ。
—
5. 実務で使える！ ちょっと便利な応用テクニック
最後に、実際のWeb制作で「これを知ってるとちょっとドヤ顔できる」便利な使い方をひとつご紹介します。
例えば、「マウスが乗ったとき（hover）以外のボタンの色を、すこし薄くしたい」という場面です。
/ ボタンの基本スタイル /
.btn {
background-color: #3498db;
opacity: 1;
transition: opacity 0.3s;
}
/ マウスが乗っていない(.btn全体から、hover中を除外する)ボタンを薄くする /
.btn:not(:hover) {
opacity: 0.6;
}
こう書くことで、「マウスが乗っていないボタンたち」の透明度をスーッと下げることができます。現代の洗練されたUIデザインでは、こういう細かなシームレスな動きがサイトのクオリティをグッと上げてくれるんです。
—
おわりに
いかがでしたでしょうか？
`:not()` 関数型疑似クラス、最初は少し名前が難しそうに聞こえたかもしれませんが、蓋を開けてみれば「〜以外」という、私たちが普段の会話で何気なく使っている思考そのものでしたよね。
Web制作の道は、覚えることがたくさんあって途方に暮れることもあるかもしれません。でも、一つひとつの機能をこうして紐解いていけば、確実にあなたの武器になってくれます。
つまづいたときは、いつでもこの記事に戻ってきてくださいね。
あなたのこれからのコーディングライフが、もっと楽しく、もっと自由になりますように。それではまた、次の現場でお会いしましょう！
コメント