このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

: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(*) は要素ではないすべての要素を選択するので、ルールは適用されません。
  • この擬似クラスはルールの詳細度を上げることができます。例えば、 #foo:not(#bar) は単純な #foo と同じ要素を選択しますが、詳細度はより高くなります。
  • :not(.foo) は .foo ではないすべての要素を選択するため、<html> や <body> も選択します。
  • このセレクターは 1 つの要素のみに適用されます。祖先要素を除外することはできません。例えば、 body :not(table) a はテーブル内のリンクにも適用されます。 <tr> がセレクターの :not() の部分に該当するからです。
  • 2 つのセレクターを同時に使用することは、まだすべてのブラウザーが対応しているわけではありません。例: :not(.foo, .bar). より広く対応するためには、 :not(.foo):not(.bar) を使用することができます。

例

基本的な一連の :not() の例

HTML

<p>I am a paragraph.</p>
<p class="fancy">I am so very fancy!</p>
<div>I am NOT a paragraph.</div>
<h2>
  <span class="foo">foo inside h2</span>
  <span class="bar">bar inside h2</span>
</h2>

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;
}

/* <div> でも '.fancy' でもない要素 */
/* なお、この文法は対応が充分ではありません。 */
body :not(div, .fancy) {
  text-decoration: overline underline;
}

/* <h2> の中にある要素で <span> に foo クラスでないもの */
/* クラス付き要素のような複雑なセレクターは、まだ対応が充分ではありません。 */
h2 :not(span.foo) {
  color: red;
}

結果

仕様書

Specification
Selectors Level 4
# negation

ブラウザーの互換性

BCD tables only load in the browser

関連情報