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

У меня есть div с элементом заголовка и ul, в котором я загружаю элементы li:

<div>
 <header>Title</header>
 <ul>
 <li>Test Element</li>
 <li>Test Element</li>
 <li>Test Element</li>
 </ul>
</div>

В этом случае все .listContainer должно быть видимым.

Но возможно ли скрыть весь контейнер с помощью селектора CSS :empty, если .list пуст, например:

<div>
 <header>Title</header>
 <ul>
 </ul>
</div>

Сейчас я использую селектор :empty, чтобы скрыть ul, но весь .listContainer должен быть скрыт.

.list:empty { display: none; }

Я знаю, что это возможно с помощью JavaScript, но в этом случае мне нужно сделать это только с помощью CSS, но я не уверен, что это возможно.

1 ответ

Лучшее, что я могу предложить (учитывая, что нет родительского селектора для CSS), заключается в том, чтобы реорганизовать ваш HTML на следующее:

<div>
 
 <header>Title</header>
</div>
<div>
 <ul>
 <li>Non-empty</li>
 </ul>
 <header>Title</header>
</div>

И используйте следующий CSS:

.listContainer {
 position: relative;
 border: 2px solid #000;
}
.listContainer header {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
}
.listContainer .list {
 margin-top: 2em;
}
.list:empty,
.list:empty + header {
 display: none;
 height: 0;
 margin: 0;
 overflow: hidden;
}

JS Fiddle demo.

Это, к сожалению, требует некоторого уродливого взлома, чтобы поместить элемент header и точно не скроет .listContainer (поскольку, опять же, это невозможно на основе дочернего элемента), однако это делает приблизительное ваше требование.

С тем же HTML-кодом, что и выше, но с использованием модели flex-box (как в настоящее время, с этого времени и даты, реализованной в Webkit), чтобы изменить порядок отображения элементов и, таким образом, избежать position: absolute уродства:

.listContainer {
 border: 1px solid #000;
 display: -webkit-flex;
 -webkit-flex-direction: column;
 -webkit-flex-wrap: nowrap;
}
.listContainer header {
 display: -webkit-flex-block;
 -webkit-order: 1;
 -webkit-flex: 1 1 auto;
}
.listContainer .list {
 display: -webkit-flex-block;
 -webkit-flex-direction: column;
 -webkit-order: 2;
 -webkit-flex: 1 1 auto;
}
.listContainer .list:empty,
.listContainer .list:empty + header {
 width: 0;
 height: 0;
 margin: 0;
 padding: 0;
 overflow: hidden;
 display: none;
}

JS Fiddle demo.

licensed under cc by-sa 3.0 with attribution.