:not() enhanced (multiple arguments)
:not() は CSS の擬似クラスで、列挙されたセレクターに一致しない要素を表します。特定の項目が選択されることを防ぐため、否定擬似クラス (negation pseudo-class) と呼ばれています。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 3.1 | 18 | 2 | |
selector list セレクターリストの引数 | 88 | 88 | 84 | 9 | 88 | 9 |
基本構文
CSS
/* Excluding multiple conditions */
button:not(.primary, .secondary) {
background: gray;
color: white;
}
/* Traditional syntax */
button:not(.primary):not(.secondary) {
background: gray;
}ライブデモ
実務での使いどころ
-
デフォルトスタイルの適用
特定クラスを持たない要素にフォールバックスタイルを適用。
-
コンポーネントのバリアント除外
特定バリアント以外のボタンに共通スタイルを適用する。
注意点
- Safari 9以降で対応しているが、古いブラウザでは単一引数のみ対応。
- 引数内の最も高い詳細度が :not() 全体の詳細度に影響する。
アクセシビリティ
- 除外ロジックが複雑になるとスタイルの予測が困難になる。シンプルに保つ。