CSS :not() 疑似クラス — 除外ベースの選択
指定されたセレクターにマッチしない要素を選択するCSS :not()否定疑似クラスをマスターします。シンプルなものから複雑な:not()の使用法と寛容なセレクターリストを紹介します。
Pseudo-classes
詳細な説明
CSS :not() 疑似クラス
:not()疑似クラスは、指定されたセレクター引数にマッチしない要素を選択します。簡潔で保守しやすいCSSを書くための最も強力なツールの一つです。
構文
/* .introクラスを持たないすべての<p>要素を選択 */
p:not(.intro) {
font-size: 1rem;
}
一般的なパターン
最後の要素以外にスタイルを適用：
li:not(:last-child) {
border-bottom: 1px solid #eee;
}
送信ボタン以外のすべての入力にスタイルを適用：
input:not([type="submit"]):not([type="button"]) {
border: 1px solid #ccc;
padding: 0.5rem;
}
詳細度
:not()の詳細度は、内部の最も詳細な引数によって決まります。:not(.foo)は（.fooから）**(0, 1, 0)**の詳細度を持ち、:not自体からではありません。
ユースケース
:not()疑似クラスは除外パターンを可能にすることでCSSを簡素化します。開発者はアイテム間にボーダーを追加するが最後のアイテムには追加しない、送信ボタン以外のすべてのフォームフィールドにスタイルを適用する、無効でないインタラクティブ要素をターゲットする、ベーススタイルから特定のコンポーネントバリアントを除外するために使用します。