CSS Parents Sibling selector

Question

I have the following html:

<div class="parent">
  <p class="tag">I live in Duckburg.</p>
</div>

<div class="color">
  <p>My best friend is Mickey.</p>
</div>

What I want to do is to apply a color to the second div, if the first div has a child.

I'm applying the following CSS.

.parent > .tag + .color{
  background-color: green;
}

Expecting it to select the parent of tag and then selecting the adjuscent color div and apply the background style. But it doesn't work. Can you please help.

no, there is no parent selector. You have to use Javascript for that — Johannes, Oct 06 '20 at 10:42

score 2 · Accepted Answer · answered Oct 06 '20 at 10:51

I initially closed this question due to the requirement of a parent selector (which does not exist), but actually you don't need it.

As long as your empty .parent element is entirely empty, ie. no white space whatsoever, then you may be able to use the following:

.parent:not(:empty) + .color {
  background: red;
  padding: 10px;
}

<div class="parent">
  <p class="tag">I live in Duckburg.</p>
</div>

<div class="color">
  <p>I will be selected</p>
</div>

<div class="parent"></div>

<div class="color">
  <p>I will NOT be selected</p>
</div>

CSS Parents Sibling selector

1 Answers1