html - How to apply css to outer div if ul item contains li items

I have two cases in my rendered HTML page.

Case 1:

  
A
  
B
 
Testing here

Case 2:

In case 1, I want to apply CSS to the div if ul element contains li elements). I don't want anything for case 2. I want a pure CSS approach without any jQuery/JavaScript.

Answer

In addition to UncaughtTypeError's answer.

There is a selector :not(:empty) for applying css to element if it has a child.

Check the :not(:empty) for more details about the selector.

* {
  box-sizing: border-box;
}
ul:not(:empty) + .test {
  background: black;
  color: white;
  padding: 5px;

}

  
A
  
B
 
Testing here


Testing here