0

My problem is that I don't know how to move a div container, if another container is empty. My structure looks like this:

HTML:

<div id="wrapper">
    <div id="child1">
        Some content....
    </div>
    <div id="child2"></div>
</div>

CSS:

#wrapper
    {
    /* nop */
    }

#child1
    {
    transform: translate(0, -3950px);
    }

#child2:empty #child1
    {
    transform: translate(0, -4100px);
    }

I know that my #child1 is not inside #child2 but how can I select #child1 if #child2 is empty? Is there a special css trick?

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Cankar
  • 11
  • 5

1 Answers1

-1

Fun stuff.

You can use the adjacent sibling selector and the :empty pseudo-class, such as:

#child2:empty ~ #child1 {
  background-color: red;
}

Make sure you also invert the order of your divs, please see working jsfiddle here:

https://jsfiddle.net/z0uve835/1/

santamanno
  • 626
  • 4
  • 12
  • That did not work, #child1 is not moving at all, is there another possible solution? – Cankar Sep 02 '19 at 11:18
  • Apologies, you also have to invert the order of divs, plase see jfiddle here: https://jsfiddle.net/z0uve835/1/ – santamanno Sep 02 '19 at 11:46
  • Unfortunately I do not have access to the html because it is a wordpress system where the html is loaded dynamically. So would it work if I invert the css instead? Like: #child1 ~ #child2:empty – Cankar Sep 02 '19 at 12:06
  • There is no css previous sibling selector unfortunately :( – santamanno Sep 02 '19 at 14:05
  • 1
    Oh okay, but thank you very much for your help! – Cankar Sep 02 '19 at 14:11