: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).
Du musst angemeldet sein, um einen Kommentar abzugeben.
Die besten, die ich anbieten kann (in Anbetracht, dass es keinen parent-Selektor für CSS), ist überarbeiten Sie Ihre HTML -, um die folgenden:
Und verwenden Sie die folgende CSS:
JS Fiddle demo.
Bedeutet dies, leider, erfordern einige hässliche hacken, um die position der
header
element, und nicht genau verstecken die.listContainer
(da wiederum ist es nicht möglich, basierend auf ein Kind-element), es ist aber nicht annähernd Ihren Anforderungen.Mit der gleiche HTML-Code wie oben, aber mit dem flex-box-Modell (wie zurzeit, als dieses von Zeit und Datum, umgesetzt in Webkit), um die Reihenfolge der Elemente " - display, und vermeiden so die
position: absolute
Hässlichkeit:JS Fiddle demo.