このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

:not()”擬似クラスCSS Selectors Level 3で追加

記事Jul. 27th,2021
セレクタ・リストの中のいずれにも一致しない要素を選択する擬似クラス、“:not()”について
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

:not()”擬似クラス

:not()”擬似クラスは引数となるセレクタ・リストの中にあるセレクタのうちいずれにも選択されない要素を選択する関数擬似クラスです。

通常のセレクタ・リストはいずれかのリストに含まれるセレクタうちいずれかが無効である場合にはリスト全体が無効となりますが、“:not()”擬似クラスの引数はコンマ(“,”)で区切られた一つずつのセレクタが個別に検証され、無効なものがある場合には無効なセレクタだけが無視されます。

:not()”擬似クラスの詳細度は引数として含まれるセレクタ・リストの中にあるセレクタのうちもっとも詳細度が高いセレクタの詳細度に置き換えられます。

:not()”擬似クラスの引数となる合成セレクタ全称セレクタもしくはタイプ・セレクタを含まない場合は名前空間の接頭辞がなくても既定の名前空間に限定されません。

:not()”擬似クラスの引数に擬似要素を含むことはできません。

使用例

li:not(mars) > ul {
text-decoration: underline dotted 2px:
}

li:not(mars,jupiter) > ul {
font: bold 1em "游明朝","ヒラギノ明朝",serif;
background-color: #00a497; /**/
}
<ol>
<li>水星</li>
<li>金星</li>
<li>地球
<ul>
<li>月</li>
</ul>
</li>
<li class="mars">火星
<ul>
<li>フォボス</li>
<li>ダイモス</li>
</ul>
</li>
<li class="jupiter">木星
<ul>
<li>イオ</li>
<li>エウロパ</li>
<li>ガニメデ</li>
<li>カリスト</li>
</ul>
</li>
<li>土星
<ul>
<li>テティス</li>
<li>ディオネ</li>
<li>レア</li>
<li>タイタン</li>
<li>イアペトゥス</li>
</ul>
</li>
<li>天王星</li>
<li>海王星</li>
</ul>
  1. 水星
  2. 金星
  3. 地球
  4. 火星
    • フォボス
    • ダイモス
  5. 木星
    • イオ
    • エウロパ
    • ガニメデ
    • カリスト
  6. 土星
    • テティス
    • ディオネ
    • レア
    • タイタン
    • イアペトゥス
  7. 天王星
  8. 海王星

仕様書

定義されている仕様書
Level 1 Level 2 Level 3 Level 4
勧告(REC) 勧告(REC) 勧告(REC) 作業草稿(WD)
:not
定義なし

定義なし

定義あり

定義あり
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク