:has() でリストが空のときにセクションごと消す

css-has.md

:has() が 2023 年末にすべてのブラウザでサポートされて、現実的に利用できるようになった。

• :has() - CSS: カスケーディングスタイルシート | MDN
• 朗報！ CSSの:has()疑似クラスがすべてのブラウザにサポートされました、:has()疑似クラスの便利な使い方のまとめ | コリス

「渡したセレクターにマッチする子要素を持つ親要素であるか」を判定できるので、例えばリストが空のときにセクションごと消すことができる。

<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>