has セレクターで「特定の子要素を持つ親要素」にマッチさせる

• Selectors Level 4 | W3C
• :has() CSS relational pseudo-class | Can I Use

まだ使えるブラウザがないのは残念だが、これまで JQuery などを使ってしかできなかったことが CSS でもできるようになるのは魅力的。

nth-child セレクターと組み合わせることで、「項目が 4つ以上あるリストは折りたたむ」みたいなことができそう。

.list:has(.list__item:nth-child(4)) {
    ...
}

ユーザーエージェントスタイルシートで、これまで指定できなかった場所にスタイルを当てることができるようになるのも、このセレクターに期待を持つ理由。