css :not擬似クラス完全ガイド｜複数指定の書き方と実践パターンを徹底解説

はじめに

CSSの設計において「特定の要素だけを除外したい」という場面は少なくありません。

そのようなケースで活用されるのが:not擬似クラスです。しかし、構文の理解不足や複数指定の誤用により、意図しないスタイル適用やレイアウト崩れが発生することも多く見受けられます。

本記事では、:not擬似クラスの基本構文から応用的な複数指定の方法、実務での活用例、そして設計時の注意点までを体系的に解説します。

:not擬似クラスとは何か

:notの基本構文

:notは「否定擬似クラス（Negation Pseudo-class）」と呼ばれ、指定したセレクタに一致しない要素を対象にスタイルを適用するための仕組みです。

基本構文は以下の通りです。

selector:not(condition) {
  /* スタイル */
}

たとえば、.activeクラスを持たないp要素にスタイルを適用したい場合は次のように書きます。

p:not(.active) {
  color: gray;
}

この場合、.activeクラスを持たないp要素に対してスタイルが適用されます。

ポイントは、「除外したい条件を括弧内に書く」 という点です。条件に一致しない要素が選択対象になります。

通常のセレクタとの違い

通常のCSSセレクタは「一致するものを選択」します。一方で:notは 「一致しないもの」を選択します。

.button { }
.button.primary { }
.button:not(.primary) { }

• .button.primaryはprimaryを持つものを選択
• .button:not(.primary)はprimaryを持たないものを選択

つまり:notは 「条件の反転」 を行う役割を持ちます。

:notが使われる代表的な場面

実務で多い活用例は以下の通りです。

• 特定クラスを除いた共通スタイル適用
• フォームの一部入力欄のみ除外
• レイアウト調整時の例外処理
• デザインシステムにおける拡張制御

設計段階で例外的な要素を明確に制御したい場合に非常に有効です。

:notの基本的な使い方

単一条件の指定方法

最も基本的な使い方は単一セレクタの除外です。

li:not(:last-child) {
  margin-bottom: 16px;
}

上記では、最後のli要素以外に余白を付与しています。レイアウト調整で頻出するパターンです。

クラスやIDを除外する例

div:not(#main) {
  background-color: #ffa0b6;
}

#main以外のdivにスタイルを適用します。

ただし、ID指定は詳細度が高くなるため、設計方針に基づいて使用することが望ましいです。

要素セレクタとの組み合わせ

input:not([type="submit"]) {
  border: 1px solid #ffa0b6;
}

このように属性セレクタとも組み合わせ可能です。送信ボタン以外のinputにのみ装飾を適用できます。

:notの複数指定方法を理解する

セレクタリストによる複数指定

CSS Level 4以降では、:not内に複数セレクタを指定できます。

div:not(.box, .card) {
  padding: 16px;
}

.boxと.cardの両方を除外できます。

以前は以下のように分ける必要がありました。

div:not(.box):not(.card)

現在は可読性向上の観点からセレクタリスト形式が推奨されています。

ネストとの違い

以下は意味が異なります。

div:not(.box .item)
div:not(.box) .item

前者は「.box .itemに一致しないdiv」、後者は「.boxでないdivの中の.item」です。

セレクタの構造理解が不十分だと誤用につながるため、注意が必要です。

複数指定でよくあるミス

よくあるミスには以下があります。

• カンマの位置誤り
• ブラウザ対応の未確認
• 詳細度の過小評価
• セレクタの解釈違い

特にチーム開発では可読性を意識した記述が重要です。

:notを使った実践パターン

フォーム要素の一部を除外する

input:not([type="checkbox"], [type="radio"]) {
  width: 100%;
}

チェックボックス・ラジオボタン以外の入力欄を一括制御できます。

特定クラス以外にスタイルを当てる

.button:not(.disabled) {
  cursor: pointer;
}

無効状態以外にポインターを付与する設計は実務でも頻出するパターンです。

擬似クラスとの組み合わせ

a:not(:hover) {
  text-decoration: none;
}

他の擬似クラスとも柔軟に組み合わせ可能です。

:notを使う際の注意点とベストプラクティス

詳細度（specificity）への影響

:not自体は詳細度を増やしませんが、内部セレクタは詳細度に影響します。

div:not(.active)

この場合、.activeのクラス分の詳細度が加算されます。

設計段階で詳細度戦略を整理することが重要です。

可読性を保つ書き方

可読性を高めるためには、以下の点を意識してください。

• 条件を増やしすぎない
• 意図が分かるクラス設計を行う
• 複雑な否定は避ける

冗長な:not連鎖は保守性を下げます。

実務での設計指針

設計指針としては以下が有効です。

• BEM設計と組み合わせる
• 例外は最小限にする
• 詳細度の階層設計を意識する
• グローバル指定を避ける

:notは例外制御のための補助的手段として活用するのが望ましいと言えます。

まとめ

:not擬似クラスは、特定条件を除外するための強力なCSSセレクタです。単一条件だけでなく複数指定にも対応しており、実務において例外制御やレイアウト調整に大きく貢献します。

一方で、詳細度や可読性を考慮せずに使用すると、保守性低下や意図しないスタイルの競合を招く可能性があります。構文理解と設計思想の両面から正しく活用することが重要です。

体系的にWeb制作を学び、実務に通用する設計力を身につけたい方は、WEBMASTERSのプログラミングスクールがおすすめです。未経験から実務レベルのスキルを体系的に習得できる環境が整っています。

:notを単なるテクニックとしてではなく、設計思想の一部として使いこなせるよう、本記事の内容をぜひ実務に活かしてください。