やあ！CSSの世界へようこそ。フロントエンドの現場で長年コードを書き続けていると、CSSは単なる「見た目を整える道具」以上の、「いかに賢く、楽に、そして美しく要素を制御するか」というパズルゲームのような面白さがあることに気づくはずです。
今日は、そんなCSSの中でも特に「かゆい所に手が届く」魔法のコマンド、`:not()`（ノット）についてお話しします。特に最近使えるようになった「複数指定」のテクニックは、知っておくとコードが驚くほどスッキリしますよ。
—
:not() って何？ 「除外」の魔法
まずは基本から。`:not()` は、文字通り「〜ではないもの」を対象にするセレクタです。
例えば、クラス名が `.btn` のボタンを全部赤くしたいけれど、「キャンセルボタンだけはグレーにしたい」という時。これまでは、わざわざ「キャンセルボタンに上書き用のCSSを書いて、元の赤色を打ち消す」という面倒なことをしていませんでしたか？
`:not()` を使えば、最初から「キャンセルボタン以外」という条件で指定できるんです。
革命的な「複数引数」：カンマで区切れる快適さ
昔の `:not()` は、実は「条件を一つしか書けない」という制約がありました。でも今は違います！CSS Selectors Level 4の恩恵で、カンマで区切って複数の条件を除外できるようになったんです。
これがどれほど革命的か、身近な例で考えてみましょう。
お買い物のレジにて
スーパーのレジで、「野菜」と「お肉」と「お魚」を買ったとします。店員さんが「袋に入れるのは、『お酒』と『タバコ』以外でお願いします」と言ったとき、皆さんはどうしますか？
いちいち「これはお酒じゃないから袋に入れて…」「これはタバコじゃないから袋に入れて…」と考えませんよね。「お酒とタバコ以外全部」と一括りにするはずです。
これが、新しい `:not()` の考え方です。
実践コードで見てみよう
例えば、ページ内のあらゆるテキストに対してスタイルを当てたいけれど、「見出し（h1, h2, h3）」や「特定のクラス（.ignore-text）」だけは除外したいとき。
/ 「見出しのタグ」と「.ignore-textというクラス」を除外してスタイルを適用 /
p:not(h1, h2, h3, .ignore-text) {
/ ここに書いたスタイルは、見出しや除外クラスには一切影響しません /
color: #333;
line-height: 1.6;
font-size: 16px;
}
どうでしょう。これまでは `:not(h1):not(h2):not(h3)` と、まるで呪文のように重ねて書いていたものが、たった一行でスッキリ書けるようになりました。
—
初学者がつまずきやすい「落とし穴」
ここで一つだけ、現場でよくある失敗談をシェアしますね。「よし、これを使えば何でも除外できる！」と意気込んで、こんな書き方をする人がいます。
/ よくある間違い：:notの中に複雑なセレクタを入れすぎる /
:not(.header, .footer, .sidebar .menu-item) {
/ 期待通りに動かないことが多い /
}
`:not()` はあくまで「シンプルな除外」に向いています。あまりに複雑な条件を詰め込みすぎると、CSSの計算が複雑になりすぎて、後から修正する時に「あれ？なんでこのスタイルが当たらないんだっけ？」と迷子になってしまいます。
コツは、「何を除外したいか」を明確にすること。 そして、なるべくクラス名などシンプルな指定で除外することです。
—
現場のチーフアーキテクトからのアドバイス
`:not()` を使いこなせるようになると、CSSを書く姿勢が変わります。「あとから上書きして打ち消す」という守りのコーディングから、「最初から不要なものを除外して対象を絞り込む」という攻めのコーディングへシフトできるからです。
コードがスッキリすると、バグも減りますし、何より後から見た自分が「おっ、ここスマートに書いてあるな」とニヤリとできますよ。
もし最初につまずいても大丈夫。「あ、このブラウザでは動かないかな？」と不安なときは、[Can I use](https://caniuse.com/) というサイトで `:not()` の対応状況をチェックする癖をつけておけば、もう怖いものなしです。
さあ、次はあなたのエディタで、この「除外の魔法」を試してみてください。きっと、CSSを書く時間がもっと楽しくなるはずです。応援していますよ！
コメント