yaakai.to

🖊

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

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