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() の定義 |
勧告 | 初回定義。 |
ブラウザー実装状況
このページの互換性一覧表は構造化データから生成されます。データに協力したいのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。