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

:is()”擬似クラスCSS Selectors Level 4で追加

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

:is()”擬似クラス

:is()”擬似クラスは引数となるセレクタ・リストの中にあるセレクタのうち少なくとも一つによって選択される要素を選択する関数擬似クラスです。

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

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

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

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

仕様書の過去の草案ではこの擬似クラスの名前は“:matches”だったので、ユーザー・エージェントはこれを“:is()”擬似クラスの別名として扱うことができます。

使用例

:is(ol,ul,menu) li {
font: bold 1.1em "游明朝","ヒラギノ明朝",serif;
background-color: #e198b4; /**/
}

:is(ol,ul,menu) :is(ol,ul,menu) li {
font: 0.9em "游明朝","ヒラギノ明朝",serif;
background-color: #00a497; /**/
}
<ol>
<li>水星</li>
<li>金星</li>
<li>地球</li>
<li>火星
<ol>
<li>フォボス</li>
<li>ダイモス</li>
</ol>
</li>
<li>木星
<ul>
<li>イオ</li>
<li>エウロパ</li>
<li>ガニメデ</li>
<li>カリスト</li>
</ul>
</li>
<li>土星</li>
<li>天王星</li>
<li>海王星</li>
</ul>
  1. 水星
  2. 金星
  3. 地球
  4. 火星
    1. フォボス
    2. ダイモス
  5. 木星
    • イオ
    • エウロパ
    • ガニメデ
    • カリスト
  6. 土星
  7. 天王星
  8. 海王星

仕様書

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

定義なし

定義なし

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