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

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

メモ:

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

構文

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

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

:not( <selector># )

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() の定義
勧告 初回定義。

ブラウザー実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 1IE 完全対応 9Opera 完全対応 9.5Safari 完全対応 3.2WebView Android 完全対応 2Chrome Android ? Edge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 10Safari iOS 完全対応 3.2Samsung Internet Android ?
Selector list argumentChrome 未対応 なしEdge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 未対応 なしSafari 完全対応 9WebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 完全対応 9Samsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明

ドキュメントのタグと貢献者

このページの貢献者: SphinxKnight, masato, mfuji09, ethertank, sosleepy
最終更新者: SphinxKnight,