:not()

:not() は CSS の擬似クラスで、列挙されたセレクターに一致しない要素を表します。特定の項目が選択されることを防ぐため、否定擬似クラス (negation pseudo-class) と呼ばれています。

/* 段落以外の要素を選択 */
:not(p) {
  color: blue;
}

:not() 擬似クラスには、使用する前に知っておいた方が良いクセやコツ、予想外の結果がいくつかあります。

構文

:not() 擬似クラスは引数として、1つまたは複数のセレクターをカンマで区切ったものを要求します。リストには否定セレクターや擬似要素を含めることはできません。

複数のセレクターを指定することは実験的な機能で、広くは対応されていません。

:not( <complex-selector-list> )
ここで
<complex-selector-list> = <complex-selector>#
ここで
<complex-selector> = <compound-selector> [ <combinator>? <compound-selector> ]*
ここで
<compound-selector> = [ <type-selector>? <subclass-selector>* [ <pseudo-element-selector> <pseudo-class-selector>* ]* ]!
<combinator> = '>' | '+' | '~' | [ '||' ]
ここで
<type-selector> = <wq-name> | <ns-prefix>? '*'
<subclass-selector> = <id-selector> | <class-selector> | <attribute-selector> | <pseudo-class-selector>
<pseudo-element-selector> = ':' <pseudo-class-selector>
<pseudo-class-selector> = ':' <ident-token> | ':' <function-token> <any-value> ')'
ここで
<wq-name> = <ns-prefix>? <ident-token>
<ns-prefix> = [ <ident-token> | '*' ]?  | 
<id-selector> = <hash-token>
<class-selector> = '.' <ident-token>
<attribute-selector> = '[' <wq-name> ']' | '[' <wq-name> <attr-matcher> [ <string-token> | <ident-token> ] <attr-modifier>? ']'
ここで
<attr-matcher> = [ '~' |  |  | '^' | '$' | '*' ]? '='
<attr-modifier> = i | s

解説

:not() を使用する際のふつうではない効果や結果がいくつかありますので、使用する際には気を付けてください。

  • :not 擬似クラスは入れ子にすることができません。すなわち :not(:not(...)) は無効です。
  • 擬似要素は単純セレクターではありませんので、 :not() で有効な引数にはなりません。従って、 :not(p::before) のようなセレクターは動作しません。
  • この擬似クラスを使用して無意味なセレクターを書くことができます。例えば、 :not(*) は要素ではないすべての要素を選択するので、規則は適用されません。
  • この擬似クラスは規則の詳細度を上げることができます。例えば、 #foo:not(#bar) は単純な #foo と同じ要素を選択しますが、詳細度はより高くなります。
  • :not(.foo) は .foo ではないすべての要素を選択するため、<html> や <body> も選択します。
  • このセレクターは1つの要素のみに適用されます。先祖要素を除外することはできません。例えば、 body :not(table) a はテーブル内のリンクにも適用されます。 <tr> がセレクターの :not() の部分に該当するからです。

例

HTML

<p>I am a paragraph.</p>
<p class="fancy">I am so very fancy!</p>
<div>I am NOT a paragraph.</div>

CSS

.fancy {
  text-shadow: 2px 2px 3px gold;
}

/* '.fancy' クラスの中にない <p> 要素 */
p:not(.fancy) {
  color: green;
}

/* <p> 要素ではない要素 */
body :not(p) {
  text-decoration: underline;
}

/* <div> または <span> 要素ではない要素 */
body :not(div):not(span) {
  font-weight: bold;
}

/* '.crazy' または '.fancy' ではない要素 */
/* なお、この文法は十分に対応されていません。 */
body :not(.crazy, .fancy) {
  font-family: sans-serif;
}

結果

仕様書

仕様書 状態 備考
Selectors Level 4
:not() の定義		 草案 引数で単純セレクター以外も許容数量に拡張。
Selectors Level 3
:not() の定義		 勧告 初回定義

BCD tables only load in the browser