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

Question

I have two cases in my rendered HTML page.

Case 1:

<ul>
  <li>A</li>
  <li>B</li>
</ul> 
<div class="test">Testing here</div>

Case 2:

<ul></ul>
<div class="test"></div>

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.

It's impossible with this version of CSS (maybe with css4) you can achieve this by using JS. — Alexis, Jan 04 '18 at 07:34
Possible duplicate of [CSS selector - element with a given child](https://stackoverflow.com/questions/4220327/css-selector-element-with-a-given-child) — Mohammad Usman, Jan 04 '18 at 07:37
@BhuwanBhatt :Means apply style to class test in case one only — Abhi, Jan 04 '18 at 07:48

UncaughtTypeError · Answer 1 · 2018-01-04T07:46:29.730

The intended behaviour can be achieved with the use of the Adjacent sibling combinator (+) and the :empty^ref pseudo-class, e.g:

ul:empty + .test

Code Snippet Demonstration:

* {
  box-sizing: border-box;
}

ul:empty + .test {
  background: black;
  color: white;
  padding: 5px;
}

<ul>
  <li>A</li>
  <li>B</li>
</ul> 
<div class="test">Testing here</div>

<ul></ul>
<div class="test">Testing here</div>

The adjacent sibling combinator (+) separates two selectors and matches the second element only if it immediately follows the first element, and both are children of the same parent element. ^ref
The :empty CSS pseudo-class represents any element that has no children. Children can be either element nodes or text (including whitespace). Comments or processing instructions do not affect whether an element is considered empty or not. ^ref

score 3 · Accepted Answer · edited Jan 04 '18 at 11:02

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;
}

<ul>
  <li>A</li>
  <li>B</li>
</ul> 
<div class="test">Testing here</div>

<ul></ul>
<div class="test">Testing here</div>

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

2 Answers2