Как показать скрытый элемент, если конкретный дочерний элемент существует только CSS

Question

Вопрос: Есть ли в 2018 году какая-либо конструкция CSS, которая скрывала бы div с использованием селектора, а затем отображала бы конструкцию, содержащую определенный селектор?

---

Я отмечал это как обманщик

Селектор CSS: если контейнер пуст -> display: none;

Код будет

div { border: 1px solid black; text-align:center; width:400px }
div[id*="accordion_prop_floor_plans"]:empty { display:none }

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

Тогда я понял, что может быть другой вариант использования.

Скрыть div, которые не имеют определенного элемента. Или показать div, которые делают.

Я пробовал :has(), основываясь на Есть ли родительский селектор CSS?

, но он не работает ни в одном браузере на 2018

div { border: 1px solid black; text-align:center; width:400px }
div[id*="accordion_prop_floor_plans"] { display:none }
div[id*="accordion_prop_floor_plans"]:has(> img) { display:block }

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

Я легко могу сделать это в JS:

document.querySelector('div[id*="accordion_prop_floor_plans"]>img').parentNode.style.display="block";

div { border: 1px solid black; text-align:center; width:400px }
div[id*="accordion_prop_floor_plans"] { display:none }

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

Answer 1

Как я уже говорил, до сих пор нет решения CSS для такой ситуации, поскольку оно тесно связано с существованием родительского селектора .

Кстати, мы все еще можем использовать некоторые специальные обходные пути, чтобы показать / скрыть некоторые элементы:

Вот пример для этого конкретного случая:

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>

Идея состоит в том, чтобы сделать текст из потока, и в случае, если есть изображение, контейнер будет иметь высоту, и мы увидим текст вместе с ним. Если изображения нет, мы не увидим текст. Я также заменил border-top / bottom градиентом, чтобы не видеть их для скрытых элементов.

Это остается хакерским решением для этого конкретного случая.