:not()、:is()、:where()

:not(selector) は、指定されたセレクターに一致しない要素を選択します。選択を反転させるものです。

モダン CSS では、:not() 内に複数の引数を指定できます。列挙したセレクターのいずれにも一致しない要素に一致します：

:not() の詳細度は、最も詳細度の高い引数の詳細度になります。:not(.active) の詳細度はクラスレベル（0,1,0）です。

:is() は、リスト内のいずれかのセレクターに一致する要素に一致します。グループ化を簡潔にし、繰り返しを減らせます。

:is() は、最も詳細度の高い引数の詳細度を使用します。リストに ID セレクターが含まれている場合、ルール全体が ID の詳細度になります。

:is() は寛容なセレクター解析を使用します。リスト内のいずれかのセレクターが無効でも、そのセレクターは暗黙に無視され、残りは適用されます。通常のカンマ区切りセレクターでは、1つでも無効なものがあると全体が失敗します。

:where() は :is() とまったく同じように機能しますが、詳細度がゼロです。上書きしやすくするべきユーティリティクラスやリセットスタイル向けに設計されています。

:where() は、詳細度の競合で決して優先されるべきではない CSS リセットやベーススタイルに最適です：

詳細度の動作のまとめ：

• :is() — 引数の中で最も高い詳細度
• :where() — 常に詳細度ゼロ
• :not() — 引数の中で最も高い詳細度

これらを組み合わせると、正確で読みやすいセレクターを作成できます：

:is() と :where() は、すべてのモダンブラウザーでサポートされています。複数の引数を持つ :not() もモダンブラウザーでサポートされています。IE11 のサポートが必要なプロジェクトでは使用を避けてください。

:not() は選択を反転させ、複数の引数を受け取れます。:is() はリスト内のいずれかに一致し、そのリスト内で最も高い詳細度を持ちます。:where() も同じように機能しますが、詳細度はゼロです。リセットに最適です。3つとも寛容な解析を使用し、無効なセレクターは暗黙に無視します。