skip to Main Content

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>

2

Answers


  1. 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>
    Login or Signup to reply.
  2. You can also hide the ones that are misiing an ul>li

    .statistics-section {
      border: 2px solid red;
    }
    
    .statistics-section:not(:has(ul > 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>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search