夢の疑似クラス:has()

Posted at 2017-12-30

:has()という疑似クラスがSelectors Level 4のEditor’s Draftにある。E:has(selector)で、selectorにマッチする要素を持つE要素を表す。これが広くサポートされれば、次のようなことが可能になる。

.fooを子孫に持つ.containerの中の.barにスタイルを当てる：

.container:has(.foo) .bar {
  color: red;
}

DOMツリー上に.fooがあるときに、.barにスタイルを当てる：

:root:has(.foo) .bar {
  color: red;
}

DOMツリー上の.fooがチェックされているときに、.barにスタイルを当てる：

:root:has(.foo:checked) .bar {
  color: red;
}