:leeren selector für das parent-element

Ich habe eine div mit einem header-element und ein ul in die ich laden li Elemente:

<div class="listContainer">
    <header>Title</header>
    <ul class="list">
        <li>Test Element</li>
        <li>Test Element</li>
        <li>Test Element</li>
    </ul>
</div>

In diesem Fall die gesamte .listContainer muss sichtbar sein.

Aber ist es möglich, sich zu verstecken, wenn der ganze container mit der CSS - :empty Selektor, wenn .list leer ist, wie dieses:

<div class="listContainer">
    <header>Title</header>
    <ul class="list">
    </ul>
</div>

Recht, jetzt bin ich mit der :empty Selektor ausblenden ul, aber das ganze .listContainer versteckt werden muß.

.list:empty { display: none; }

Ich weiß, dass es möglich ist mit JavaScript, aber in diesem Fall muss ich es mit CSS alleine, aber ich bin nicht sicher, ob dies möglich ist.

  • Gibt es keinen parent-Selektor in CSS also die ganze .listContainer können nicht beeinflusst werden, basierend auf das Kind .list leer ist (oder etwas anderes). Auch für :empty zu gelten, müssten Sie ein element völlig frei von Inhalt (nicht einmal ein textNode).
  • Dachte ich mir schon, aber danke!
  • Letztendlich können diese möglich sein, mit CSS4-Selektoren: .listContainer! > .list:empty (abgesehen von den textNode Problem @DavidThomas darauf hingewiesen).
  • NÖ, scheint nicht so zu mehr, zumindest nicht in Selektoren Stufe 4 (derzeit, obwohl dies kann sich ändern, natürlich).
Schreibe einen Kommentar