0

Hoping there's a way to do this in pure css. I would like to make the header div visible only when the ul has list items.

<div id="header">
  The list has items!
</div>

<div id="list_container">
  <ul id="list">

  </ul>
</div>

I have been trying to figure out if I can do this with the :not selector somehow, but have only been able to find jquery examples which would need a thread running to monitor the lists etc.

user4893295
  • 533
  • 6
  • 25
  • Can you use jQuery or JavaScript for this? – Patrick Mlr Oct 06 '17 at 11:01
  • If you are using some template engine or server side language like php to render your html, you can use some conditional class on your header div, that gets added only if `ul` has no `li` items. – Mohit Bhardwaj Oct 06 '17 at 11:02
  • How is this a duplicate of a question where it asks for a sibling? – Siyah Oct 06 '17 at 11:05
  • 2
    @Siyah It looks like he's asking for a selector for this but it's still open if he is allowed to use JavaScript/jQuery. I think this question was too fast marked as a duplicate. – Patrick Mlr Oct 06 '17 at 11:08
  • In this case you want to apply a conditional style, in css you don't have the notion of branching (well, only with mediaqueries, but this is not applicable), so I don't think this is possible using only css. – Gerard Oct 06 '17 at 11:09
  • I'm hoping not to use jquery, because, as far as I can, any j coded solution would need some kind of timer monitoring the lists for changes, so I had hoped that a pure css solution would be able to take care of it.... – user4893295 Oct 06 '17 at 11:24
  • @user4893295 there should be some attribute looking for list is empty or not, I created this plnkr assuming there is an `attribute` which checks list is empty or not https://plnkr.co/edit/xPxztSv4isrOGLJPacc2?p=preview – ankitd Oct 06 '17 at 11:46

0 Answers0