CSS :not()セレクター - 要素の除外

:not()否定擬似クラス

:not()セレクターは、引数セレクターにマッチしない要素にマッチします。クリーンで効率的なCSSを書くための最も多用途なツールの一つです。

構文

:not(selector) {
  /* セレクターにマッチしない要素のスタイル */
}

基本的な例

クラスを持たないすべての段落をスタイリング：

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

送信ボタン以外のすべての入力をスタイリング：

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

:not()のチェイン

複数の:not()セレクターをチェインできます：

/* 最初と最後を除くすべてのリスト項目 */
li:not(:first-child):not(:last-child) {
  border-bottom: 1px solid #eee;
}

CSSセレクターレベル4

モダンブラウザでは、:not()はカンマ区切りのセレクターリストを受け入れます：

/* レベル4：複数のセレクターを除外 */
:not(.hidden, .disabled, [aria-hidden="true"]) {
  display: block;
}

詳細度

:not()の詳細度は、最も具体的な引数によって決定されます。:not()ラッパー自体は詳細度を追加しません：

:not(.active)     /* 詳細度: (0, 1, 0) — .activeから */
:not(#main)       /* 詳細度: (1, 0, 0) — #mainから */
:not(p)           /* 詳細度: (0, 0, 1) — pから */

よくあるパターン

/* 項目間の区切り線（最後はボーダーなし） */
.item:not(:last-child) {
  border-bottom: 1px solid #ddd;
}

/* disabled以外のすべてのフォーム要素をスタイリング */
input:not(:disabled) {
  cursor: pointer;
}

/* リンクスタイルのボタンのリセット */
a:not([href]) {
  text-decoration: none;
  color: inherit;
}