csscss-selectors

CSS Has with Not issue

How can I get the .statistics-list that contains a ul with no li's to be hidden?

.statistics-section {
  border: 2px solid red;
}

.statistics-section:has(ul:has(:not(li))) {
  display: none;
}
<div class="statistics-section">
  <h2>Hello 1 - This should be visible</h2>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

<div class="statistics-section">
  <h2>Hello 2 - This should be hidden</h2>
  <ul></ul>
</div>

Solution

  • Test if there is any li. No need to include the ul in the selection

    .statistics-section {
  border: 2px solid red;
}

.statistics-section:not(:has(li)) {
  display: none;
}
    <div class="statistics-section">
  <h2>Hello 1 - This should be visible</h2>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

<div class="statistics-section">
    <h2>Hello 2 - This should be hidden</h2>
  <ul></ul>
</div>

    Or test an empty ul

    .statistics-section {
  border: 2px solid red;
}

.statistics-section:has(ul:empty) {
  display: none;
}
    <div class="statistics-section">
  <h2>Hello 1 - This should be visible</h2>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

<div class="statistics-section">
    <h2>Hello 2 - This should be hidden</h2>
  <ul></ul>
</div>