We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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

ブラウザー実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応1 あり199.53.2
Selector list argument なし なし なし なし なし9
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応2.1 ? あり4103.2 ?
Selector list argument なし なし なし なし なし9 なし

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

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