CSS3

：

疑似クラス

：

:has()

　 編集：2022.07.14 by T.A.

[Edge]⛌。→●、mdn

…を持つ要素。

E:has(<forgiving-relative-selector-list>)
E 該当させる要素。
<forgiving-relative-selector-list> ● 各成分を ― <complex-selector> ではなく ― <relative-selector> として構文解析することを除いて、<forgiving-selector-list> に一致する。
<forgiving-selector-list> 選択子リスト ●
＝<relative-selector>
| <complex-selector>
| <compound-selector>
<relative-selector> 相対選択子
＝<combinator>? <complex-selector>
<combinator> 結合子（子孫結合子以外）
＝'>'
| '+'
| '~'
| [ '|' '|' ]
<complex-selector> 複体選択子
＝<compound-selector> [ <combinator>? <compound-selector> ]*
<compound-selector> 合体選択子
＝[ <type-selector>? <subclass-selector>*
[ <pseudo-element-selector> <pseudo-class-selector>* ]* ]!
<subclass-selector>
＝<id-selector>
| <class-selector>
| <attribute-selector>
| <pseudo-class-selector>

関係上の疑似クラス :has() は <forgiving-relative-selector-list> を引数にとる関数形疑似クラスである。

それは、次を満たす 要素 E を表現する ：

選択子リストの中のいずれかの相対選択子 S について、［E を :scope 要素とする下で、S を絶対化した上で評価したとき］に、合致する要素がある。
例えば、次の選択子は、A 要素のうち、IMG を子に持つものに限り合致する： 
a:has(> img)

次の選択子は、DT 要素のうち、直後に別の DT 要素が在るものに合致する： 

dt:has(+ dt)

次の選択子は、SECTION 要素のうち、見出し要素を包含しないものに合致する： 

section:not(:has(h1, h2, h3, h4, h5, h6))

上の選択子における順序は重要であることに注意。2 つの疑似クラスの入れ子を次の様に入れ替えた場合： 

section:has(:not(h1, h2, h3, h4, h5, h6))

見出し要素でない何らかの要素を包含するような、どの SECTION 要素にも合致することになる。

:has() 疑似クラスのサポートは、この仕様に適合するためには要求されない。

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

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

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

ここに表示
¶[Edge]✖？
HTML：

ここに表示
スクリプト：


スクリプト：



表示内容：
表示内容：