CSSの世界へようこそ！フロントエンドの深淵を覗く旅の第一歩ですね。
CSSを書き始めた頃、「これ全部に色をつけたいけど、あいつだけは例外にしたいんだよな…」と悩んだことはありませんか？ クラスをわざわざ書き換えたり、後から無理やり上書きしてコードがぐちゃぐちゃになったり。
そんな「例外処理」の救世主が、今回紹介する `:not()` 擬似クラスです。これを知っているだけで、あなたのCSSは驚くほどスマートに、そして人間味のあるものに変わります。
—
`:not()` は「わがままな選別機」
想像してみてください。あなたは今、行列ができる人気カフェの店員さんです。
「今日はお客さん全員に、ウェルカムドリンクのクーポンを配ろう！」と決めました。でも、「すでに会員登録している人」だけは対象外にしたい。
そんな時、あなたは心の中でこう思いますよね。
「会員の人『以外』全員に、クーポンを渡して！」
これこそが `:not()` の考え方です。
CSSの世界では、これを「否定擬似クラス」と呼びます。カッコの中に「除外したい条件」を書くだけで、それ以外の要素をパパッと選んでくれる、とても優秀な選別機なんです。
基本的な書き方
/ 「.member」というクラスを持っていない要素だけにスタイルを当てる /
:not(.member) {
color: #ff6b6b; / 会員以外は目立つ色に！ /
}
たったこれだけ。「あれもこれも指定して、最後に例外を打ち消す」という面倒な作業から、今日で卒業しましょう。
—
身近な例で見てみよう：お買い物のレジ
例えば、オンラインショップのボタンを想像してください。
「すべてのアクションボタンを青色にしたい。でも、キャンセルボタンだけはグレーにしておきたいな」という時。
普通なら、ボタン全部にクラスをつけて、キャンセルボタンだけ別のクラスをつけて……とやりがちですが、`:not()` を使うとこうなります。
/ .cancel クラスを持っていない .btn を選ぶ /
.btn:not(.cancel) {
background-color: blue;
color: white;
}
/ キャンセルボタンは個別に指定 /
.cancel {
background-color: gray;
}
このように、「例外だけを後回しにする」という思考に切り替えるだけで、CSSの記述量は劇的に減り、読みやすさ（可読性）がグッと上がります。
—
初学者がつまずきやすい「落とし穴」
ここで一つ、優しく注意点を。`:not()` は魔法の杖ですが、万能ではありません。
1. カッコの中には「単純なもの」を入れるのがコツ
`:not(.item)` や `:not(#header)` のように、基本的には一つの条件を入れるのが最も安全です。慣れないうちに `:not(.a .b)` のように複雑な組み合わせを入れると、意図した通りに動かなくてパニックになることがあります。最初は「一つのクラス」を除外することから始めましょう。
2. 「すべて」を否定することはできない
「すべての要素を赤くする。ただし、何も指定しない要素は除く」といった、広すぎる範囲を指定しすぎると、ブラウザが少し混乱したり、意図しない場所まで影響が出ることがあります。「どのグループの中での例外か」を明確にすることが、美しいCSSへの近道です。
—
最後にお伝えしたいこと
CSSは、時に厳しいルールに縛られているように感じるかもしれません。「なんで動かないの！」とPCの前で頭を抱える夜もあるでしょう。でも大丈夫、それはあなたが「意図を持ってデザインしようとしている証拠」です。
`:not()` を使いこなすことは、単なるテクニックの習得ではありません。「例外をどう扱うか」という、プログラミングやデザインの本質的な考え方を学ぶことと同じです。
まずは、今書いているコードの中で「これ、わざわざクラスを分ける必要あるかな？」と思う部分を探してみてください。そこが、`:not()` の出番です。
少しずつ、丁寧に。あなたの書くコードが、もっと自由で軽やかなものになりますように。応援していますよ！
コメント