CSS3

疑似クラス

:where()

  編集:2022.07.13 by T.A.

mdn

¶選択子の論理和。

E:where(選択子リスト)
E 該当させる要素。
選択子リスト

詳細度調整 疑似クラス :where() は、:is() と同じ構文と機能性を備える、関数形疑似クラスである。:is() と違って、:where() 疑似クラスは、その引数も含め選択子の詳細度には寄与しない ― その詳細度は、常に 0 になる。

これは、選択子内にフィルタを導入しつつ、結び付けられているスタイル宣言も上書きし易く保つときに有用になる。

経験的な詳細度が作者の期待に沿わないような、よくある例:
a:not(:hover) {
  text-decoration: none;
}

nav a {
  /*  効果なし  */
  text-decoration: underline;
}

しかしながら、:where() を利用すれば、作者は自身の意図を明示的に宣言できる:

a:where(:not(:hover)) {
  text-decoration: none;
}

nav a {
  /*  今度は働く  */
  text-decoration: underline;
}

注記: Selectors の将来レベルでは、この疑似クラスのインスタンスに明示的に詳細度を設定する、追加の引数も導入するかもしれない。

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

<A href="#ATest">リンク</A><BR>
<A class=Test id=ATest>テストアンカー</A>
選択子リストはorのようだ


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

ここに表示
¶[Edge]効果はあるようだが、意味があるのか?
HTML:

ここに表示
スクリプト:


スクリプト:



表示内容:
表示内容: