🖊
:has()
が 2023 年末にすべてのブラウザでサポートされて、現実的に利用できるようになりました。
「渡したセレクターにマッチする子要素を持つ親要素であるか」を判定できるので、例えばリストが空のときにセクションごと消すことができます。
<style>
section:has(ul:empty) {
display: none;
}
</style>
<section class="section">
<h1>section1</h1>
<ul>
<li>item1</li>
<li>item2</li>
</ul>
</section>
<section class="section">
<h1>section2</h1>
<ul>
</ul>
</section>