CSS3

疑似クラス

:is()

  編集:2022.07.09 by T.A.

mdn

論理和。

E:is(<forgiving-selector-list>)
E 該当させる要素。
<forgiving-selector-list> 選択子リスト

論理和(matches-any)疑似クラス。

引数を構文解析した結果が空リストになる場合、この疑似クラスは ― 妥当であるが ― 何にも合致しない。他の場合、この疑似クラスは、[リスト内のいずれかの選択子に合致する要素]に合致する。

注記: :is() 疑似クラスの詳細度は、引数のうち最も詳細度が高いものに置換される。したがって、:is() で書かれた選択子の詳細度は、:is() を外して展開したものと等価になるとは限らない。

例えば,次の 2 つの選択子があるとき:

  1. :is(ul, ol, .list) > [hidden]
    
  2. ul > [hidden], ol > [hidden], .list > [hidden]
    

ol の子のうち hidden を有するものは、前者の選択子には詳細度 (0,2,0) で合致する一方で、後者の選択子には詳細度 (0,1,1) で合致する。選択子の詳細度の計算法を見よ。

疑似要素は、論理和 疑似クラスでは表現し得ない ― それらは :is() の中では妥当でない。

既定の名前空間宣言は、:is() 疑似クラス【の引数】の中のどの選択子に対しても、その選択対象を表現している合体選択子には ― それが、明示的に[全称選択子/型選択子]を包含している場合を除き ― 影響しない。

例えば次の選択子は、名前空間を問わず、hover/フォーカス された任意の要素に合致する。したがって、その照合は、既定の名前空間に属する要素のみに制限されない。
*|*:is(:hover, :focus)

一方で次の選択子は、hover/フォーカスされた要素のうち、既定の名前空間に属するもののみを表現する【既定の名前空間は宣言済みとする】。:is() 記法の中で明示的に全称選択子が利用されているので:

*|*:is(*:hover, *:focus)

この仕様の以前の草案では、この疑似クラス用の名前に :matches() を利用していた。ユーザー エージェントは、後方互換性に必要なら、この廃用にされた名前を :is() 用の別名として追加で実装してもよい。

以下のCSSが組み込んであります:

<SPAN class=Test>テスト</SPAN><BR>
<SPAN class=Test>テスト<B>B</B></SPAN><BR>

<SPAN class=Test2>テスト</SPAN><BR>
<INPUT class=Test2><BR>


テスト
別画面に表示させて。
HTML:

ここに表示
¶[Edge]○?
HTML:

ここに表示
スクリプト:


スクリプト:



表示内容:
表示内容: