【入門編】 :not() 否定疑似クラス – CSS実践ガイド

こんにちは！フロントエンドの現場で日々CSSと格闘しているチーフアーキテクトです。

CSSを学び始めると、「全部に同じスタイルを当てたいけど、ここだけは例外にしたい…！」という場面に必ずぶつかりますよね。そんな時、わざわざその例外要素に「何もしない」という記述を書き足したり、クラス名をこねくり回したりして疲弊していませんか？

実は、そんな「めんどくさい！」をスマートに解決してくれる魔法の道具があるんです。それが今回紹介する `:not()` 、通称「否定疑似クラス」です。

—

`:not()` を一言で言うなら、「〇〇じゃないやつ、全部集合！」という命令です。

身近な例えで考えてみましょう。あなたは今、カフェの店員さんだとします。お店の中にはたくさんのお客さんがいますが、あなたは忙しいので「今から掃除をするから、店内にいるお客さん全員に一旦席を立ってもらいたい。ただし、いま注文したばかりの人以外ね！」と伝えたいとします。

この「注文したばかりの人（特定のクラス）以外」を指定するのが、まさに `:not()` の役割なんです。

/ 「.special」というクラスがついていない「li」要素だけを狙い撃ちにする /
li:not(.special) {
color: gray; / 除外された人たちは、ちょっと控えめなグレーに /
}

.special {
color: red; / 特別な人は、元気に赤色で目立たせる！ /
}

どうでしょう？「全部にスタイルを当てて、例外だけ後から打ち消す」という二度手間をかけなくても、最初から「例外を除いて適用する」というスマートな指定ができましたね。

—

CSSを触りたての頃、僕も `:not()` を使ってよく失敗しました。皆さんが同じところでつまずかないように、3つの「コツ」を伝授します。

`:not()` の中に複雑なセレクタを詰め込みすぎると、CSSが悲鳴を上げます。「:not(.a .b .c)」のように書くのではなく、「:not(.is-active)」のように、できるだけシンプルに保つのがプロの現場の鉄則です。

`:not()` 自体はセレクタの強さ（詳細度）には影響しませんが、中に入れたセレクタの内容によっては強さが変わります。もし「あれ？スタイルが効かないな？」と思ったら、それは他に負けている証拠。落ち着いてブラウザの検証ツールで確認しましょう。大丈夫、誰でも最初はそうです！

`:not()` のカッコの中を空っぽにしたり、カッコ自体を書き忘れると動きません。忘れずに「除外したいもの」を書いてあげてくださいね。

—

実際に現場で `:not()` をどう使っているか、具体的なコード例を紹介します。これ、今日から使えますよ。

/ リストの間に線を引くけど、最後だけは引きたくない！ /
/ という時に、わざわざ last-child で打ち消さなくてもこう書けます /

li:not(:last-child) {
border-bottom: 1px solid #ccc; / 最後じゃないリスト全部に線を引く /
}

/ ボタンのデザインを当てたいけど、「キャンセルボタン」だけは除外したい /
button:not(.is-cancel) {
background-color: blue; / キャンセル以外は全部青いボタンに /
color: white;
}

このように、`:not()` を使うと「例外処理」がCSSの記述内で完結するので、コードが驚くほどスッキリします。

—

プロのコードがなぜ美しいか知っていますか？それは、「書かなくてもいいことを極力減らしているから」です。

`:not()` は、まさにその「引き算」を叶えてくれる強力な武器です。「例外があるたびに新しいクラスを足して、打ち消しのコードを書いて…」と悩む必要はありません。

もし今、あなたがCSSの記述で「あー、ここだけ例外にしたいのに！」と頭を抱えていたら、ぜひこの `:not()` を思い出してください。あなたの書くCSSが、今日からもっとシンプルに、もっと美しくなるはずです。

応援しています。また何かあれば、いつでも聞きに来てくださいね！