How to show a hidden element if a specific child exists CSS only

Question

Question: Is there in 2018 any CSS construct that would hide divs using a selector and then unhide one containing a specific selector?

---

I was marki

Answer 1

As I commented, there is still no CSS solution for such situation since it's closely related to the existence of a parent selector.

By the way, we can still use some specific workarounds in order to show/hide some elements:

Here is an example for this particular case:

div {
  text-align: center;
  width: 400px
}

div[id*="accordion_prop_floor_plans"] {
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(#000,#000) top/100% 1px,
    linear-gradient(#000,#000) bottom/100% 1px;
  background-repeat:no-repeat;
  border-right:1px solid;
  border-left:1px solid;
}
div[id*="accordion_prop_floor_plans"] img {
  margin-top:2px;
  margin-bottom:30px;
}
div[id*="accordion_prop_floor_plans"] > div {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
}

<div id="accordion_prop_floor_plans_1">
  <div>Plan 1</div>
</div>
<div id="accordion_prop_floor_plans_2">
  <img src="https://via.placeholder.com/350x150&text=image" title="image here" />
  <div>Plan 2</div>
</div>
<div id="accordion_prop_floor_plans_3">
  <div>Plan 3</div>
</div>

The idea is to make the text out of the flow and in case there is an image the container will have a height and we will see the text with it. If there is no image, we won't see the text. I also replaced border-top/bottom with gradient to avoid seeing them for the hidden elements.

This remain a hacky solution for this particular case.