W3 Watch Reference

:has() 疑似クラスは、引数としてセレクタを指定することで、指定された要素が、そのセレクタに一致する要素を持っている場合にマッチさせることができます。

例えば、子孫に img 要素を持つ div 要素にマッチさせたければ下記のように記述できます。

div:has(img) {
  background-color: lightgray;
}

a 要素のうち、子要素（孫要素は除く）として img 要素を持っているものにマッチさせたい場合は下記のように記述します。

a:has(> img) {
  border: 1px solid red;
}

また、下記のように記述することで、直後に p 要素を持つ、h2 要素にマッチさせるといったことも可能です。

h2:has(+ p) {
  margin-bottom: 0;
}

あるいは、他の疑似クラス、例えば、:not() 疑似クラスと組み合わせることも可能です。

見だし要素を持たない section 要素にマッチさせたいなら下記のような記述方法が使用できます。

section:not(:has(h1, h2, h3, h4, h5, h6)) {
  ...略...
}

一方で下記のように記述すれば、section 要素のうち、見だし要素以外の要素を含むものにマッチします。

section:has(:not(h1, h2, h3, h4, h5, h6)) {
  ...略...
}

div:has(img) {
  background-color: lightgray;
}

/*
  a 要素のうち、子要素として img 要素を持っているものにマッチ
*/

a:has(> img) {
  border: 1px solid red;
}

/*
  h2 要素のうち、直後の要素として p 要素が存在しているものにマッチ
*/

h2:has(+ p) {
  margin-bottom: 0;
}