Widely available YES。全主要ブラウザで対応済み。Baseline Widely available。本番利用を推奨。
セレクター Widely available

:not() enhanced (multiple arguments)

CSS Selectors Level 4 で :not() が拡張され、複数の引数を受け取れるようになった。:not(.a, .b) のように書くことで、従来の :not(.a):not(.b) をより簡潔に表現できる。

セレクター除外

概要

CSS Selectors Level 4 で :not() が拡張され、複数の引数を受け取れるようになった。:not(.a, .b) のように書くことで、従来の :not(.a):not(.b) をより簡潔に表現できる。

対応ブラウザ

デスクトップ

Chrome 88+
Edge 88+
Safari 9+
Firefox 84+

モバイル

Chrome Android 88+
Safari iOS 9+
Firefox Android 84+

基本構文

CSS 
/* 複数条件の除外 */
button:not(.primary, .secondary) {
  background: gray;
  color: white;
}

/* 従来の書き方 */
button:not(.primary):not(.secondary) {
  background: gray;
}

実務での使いどころ

  • デフォルトスタイルの適用

    特定クラスを持たない要素にフォールバックスタイルを適用。

  • コンポーネントのバリアント除外

    特定バリアント以外のボタンに共通スタイルを適用する。

注意点

  • Safari 9以降で対応しているが、古いブラウザでは単一引数のみ対応。
  • 引数内の最も高い詳細度が :not() 全体の詳細度に影響する。

アクセシビリティ

  • 除外ロジックが複雑になるとスタイルの予測が困難になる。シンプルに保つ。

参考リンク