Question 401414 in CSS Question posted in
Some basic documentation can be found here.

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

2

Answers


  1. 0

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

    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