こんにちは。CSSの世界へようこそ。
コードを書いていると、「これ以外のもの全部に色をつけたいんだけどな……」なんて思う瞬間、ありますよね。そんな時に登場するのが、今回紹介する `:not()` という、「否定」の魔法です。
最初は少し難しく感じるかもしれませんが、大丈夫。一度コツを掴めば、あなたのCSSライフが劇的にスマートになること間違いなしです。一緒に紐解いていきましょう。
—
:not() って一体なに？
`:not()` は、一言で言うと「指定した条件以外のものを選び取る」ための道具です。
身近な例えで考えてみましょう。あなたは今、カフェで「コーヒー以外を注文したい」と思っています。この時、頭の中にあるのは「コーヒー（否定する対象）」以外のすべてのメニューです。
CSSで書くならこんなイメージです。
/ カフェのメニューから、コーヒー以外を選び出す /
.menu:not(.coffee) {
/ ここに書いたスタイルは、コーヒー以外のすべてに適用されます /
color: #555;
}
「これ」以外全部、というざっくりとした指示を、コンピューターに正確に伝えることができる。これが `:not()` の一番の魅力なんです。
—
複数の条件を否定する（:not(.a, .b)）
昔のCSSでは、 `:not()` の中に一つしか条件を書けませんでした。でも今は違います。カンマで区切ることで、「あれも、これも、それもダメ！」という風に、否定したい条件をたくさん並べることができるんです。
例えば、Webサイトで「特別なボタン以外の、普通のボタンを装飾したい」というケース。
/ 「特別なボタン」と「非アクティブなボタン」以外を装飾する /
button:not(.is-special, .is-disabled) {
background-color: skyblue; / 爽やかな青色にする /
border: none;
}
こうすることで、わざわざ「特定のクラスがついているかどうか」を一つずつ確認してスタイルを打ち消す必要がなくなります。コードがスッキリして、後から見た時の「これ何のために書いてあるんだっけ？」という混乱も減りますよね。
—
否定の連鎖（:not(:first-child)）
ここから少しだけ応用編です。`:not()` の中に、さらに別のセレクタを入れることができます。これを「否定の連鎖」なんて呼ぶこともあります。
よく使うのは、「最初の一つ以外に余白をつける」というパターン。リストの項目の間にだけ線を引きたい時、一番上の線は消したいですよね。
/ リストのアイテムのうち、「最初の子要素」ではないものだけに上の線を入れる /
li:not(:first-child) {
border-top: 1px solid #ccc;
margin-top: 10px;
}
これ、すごく便利だと思いませんか？ 「一番上だけ特別扱い」というCSSをわざわざ書かなくても、この一行だけで「最初以外の全部」にルールを適用できるんです。
—
注意点：知っておいてほしい「落とし穴」
一つだけ、魔法を使う前の注意点があります。それは「詳細度（Specificity）」という、CSS界の「優先順位のルール」です。
`:not()` はあくまで「条件」なので、中身が複雑になればなるほど、そのセレクタの「強さ」が変わることがあります。
- 否定しすぎないこと: `:not()` を使いすぎると、後から「なんで色が変えられないんだ！」と悩む原因になります。
- IDセレクタとの相性: `#`（ID）のような強いセレクタを `:not()` の中に入れると、そのルールの優先順位が跳ね上がります。「あれ？ なぜか効かないぞ？」という時は、大抵この優先順位のせいです。
「あ、今の自分、ちょっと複雑にしすぎたかも？」と思ったら、一度立ち止まって「単純なクラス指定に変えられないかな？」と考えてみる。その余裕が、実は一番の近道だったりします。
—
最後に：CSSは「引き算」が面白い
初心者の方は、どうしても「これに色をつける、あれにも色をつける」と、どんどん足し算をしてしまいがちです。でも、`:not()` を使いこなせるようになると、「これ以外の全部にこうする」という「引き算」の視点が持てるようになります。
これって、デザインを作る上ですごく贅沢で、美しい考え方だと思いませんか？
最初はうまく動かなくても大丈夫。ブラウザの検証ツールで「どのスタイルが適用されているか」を見ながら、パズルのように組み替えてみてください。失敗した分だけ、CSSはあなたの強い味方になってくれます。
またいつでも、迷ったらここへ戻ってきてくださいね。あなたのコーディングが、少しでも楽しくなりますように！
コメント