CSS3: add style if there are no children-CodePudding

I'm trying to write a scss selector that will add style to the header-cart class but only when it doesn't have content inside.

I can use JS, but I think it is possible to write it in scss.

Before AJAX loaded:

<div >
  <div >
 
  </div>
</div>

After AJAX loaded:

<div >
  <div >
   
    <div >
      <div >
        
      </div>
    </div>
  </div>
</div>

So far I have managed to write something like this, but it does not work correctly:

  .dropdown-menu > {
        div {
            &:not(.has-element-loader:has(.offcanvas-content-container)) {
                border: 5px solid green;
            }
        }
    }

CodePudding user response：

You can use the :empty pseudo-class:

.dropdown-menu > div.header-cart:not(:empty) {
      border: 5px solid green;
}

.dropdown-menu > div.header-cart:empty {
      border: 5px solid pink;
}

<div >
  <div ></div>
</div>

<div >
  <div > 
    <div >
      <div ></div>
    </div>
  </div>
</div>

This shows that an empty div would receive the pink border, while a div with content would receive a green border.

CodePudding user response：

Maybe you could use :empty pseudo-class

https://developer.mozilla.org/en-US/docs/Web/CSS/:empty#:~:text=The :empty CSS pseudo-class,an element is considered empty.