Hide element and child using CSS (:empty)

Asked Feb 16 '18 at 11:54

Active Feb 16 '18 at 12:17

Viewed 646 times

I'd like to do the following. This is my element. I'd like

<div class="toc uk-panel" style="margin: 0px;"><ol></ol></div>

to select this and check, whether it's empty or not. If it is empty, I'd like to hide it.

Using

.toc:empty {
     display: none;
}

Does not work, because it contains a ol element. Is it possible to check, whether the ol element is empty and if so, remove both, ol and div?

edited Feb 16 '18 at 12:17

Temani Afif

asked Feb 16 '18 at 11:54

SPQRInc

3

Not possible with css alone, as there is [no parent selector](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) – Nico O Feb 16 '18 at 11:56
if you just hide `.toc ol:empty` the parent div should not be visible too (with the code provided) – Fabrizio Calderan Feb 16 '18 at 12:00
1

There are no parent selectors in CSS, not even in CSS3. – Tanmay Feb 16 '18 at 12:05
Hiding the empty `ol` does not hide the parent element. Too bad :-( – SPQRInc Feb 16 '18 at 12:06
@Tanmay I believe they are adding one to the level 4 selectors spec: https://drafts.csswg.org/selectors/ – Aonghas M Feb 16 '18 at 12:07
3

@Aonghas M: Yes and no. Yes, with `.toc:has(> ol:empty)` (or alternatively `.toc:matches(:empty, :has(> ol:empty))`), no because :has() still hasn't been confirmed to be included in CSS via the live profile. – BoltClock Feb 16 '18 at 12:11
@BoltClock thanks for the clarification – Aonghas M Feb 16 '18 at 13:55

0 Answers0