:not() 疑似クラス CSS プロパティとは
トピック：指定された要素/セレクタ以外のすべての要素と一致する、事ができる これは、列挙されたセレクタと一致しない要素を表する 特定のアイテムが選択されないようにするため、否定疑似クラス(negation pseudo-class)と呼ばれる
疑似クラス セレクター :not()
実例 コード 1
サンプル コードを試す:not(p) {
background: red;
}
構文
:not(selector) { css : properties ; }
疑似クラス名 {スタイル要素のプロパティ : プロパティ値; }
情報：:not() 疑似クラスは引数として、1つ又は 、複数のセレクターをコンマで区切ったものを要求します。リストには否定セレクターや疑似要素を含めることは できない 。
CSSコード：例
.abc{
text-shadow:2px 2px 3px gold;
}
p:not(.abc){
color: green;
}
body :not(p){
text-decoration: underline;
}
body :not(div):not(span){
font-weight: bold;
}
body :not(.abc, .xyz){
font-family: sans-serif;
}
使用上の注意：- この疑似クラスを使用して無意味なセレクターを書くことができる。例えば、
:not(*) は要素ではないすべての要素を選択するので、規則は適用されない - この疑似クラスは規則の詳細度を上げることができる例えば、
#foo:not(#bar) は単純な#fooと同じ要素を選択するが、詳細度はより高くなる :not(.foo) は .foo ではないすべての要素を選択するため、<html> や <body> も選択する ことができる。- このセレクターは1つの要素のみに 適用される。先祖要素を除外することはできない。例えば
body :not(table) a はテーブル内のリンクにも 適用され <tr> がセレクターの :not() の部分に該当する
サポートするデスクトップ ブラウザ対応・互換性
| Property | Desktop 互換性 |
|---|
| :not() | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|
| 基本 サポート | フルサポート◯1 | フルサポート◯あり | フルサポート◯1 | フルサポート◯9 | フルサポート◯9.5 | フルサポート◯3.2 |
|---|
| Selector list argument | サポートなし✖ | サポートなし✖ | サポートなし✖ | サポートなし✖ | サポートなし✖ | フルサポート◯9 |
|---|
サポートするモバイル ブラウザ対応・互換性
| Property | Mobile 互換性 |
|---|
| :not() | Android | Chrome for Android
| Edge Mobile | Firefox for Android
| Opera for Android
| iOS Safari | Samsung Internet |
|---|
| 基本 サポート | フルサポート◯2.1 | 不明 | フルサポート◯あり | フルサポート◯4 | フルサポート◯10 | フルサポート◯3.2 | 不明 |
|---|
| Selector list argument | サポートなし✖ | サポートなし✖ | サポートなし✖ | サポートなし✖ | サポートなし✖ | フルサポート◯9 | サポートなし✖ |
|---|
CSS :not() 疑似クラス | CSS プロパティ 値| 意味 使い方 実例 – WebRef