Hide list with one element with pure CSS

Question

Is there a way to hide a list if it contains only one element using only CSS? Bonus: Think About IE8

<ul> <li>hide this</li> <ul> 

But:

 <ul> <li>show this</li> <li>and others...</li> </ul> 

I played with all the siblings and the following selectors ( ~ + ), but there is no way to select the previous CSS element: (

Answer 1

There is a pseudo :only-child for this :only-child ( MDN )

So, if I have the following CSS

 li:only-child { display: none; } 

.. list items will only be displayed if there is more than one list item.

Fiddle

(Note. As Quentin said, he does not hide the actual list - only the list item when it is the only child ... but as long as the list itself does not have its own style, it will be just like hiding the list)

An excerpt from the above MDN article is also provided:

The class pseudo-class :only-child is any element that is only the child of its parent. This is the same as :first-child:last-child or :nth-child(1):nth-last-child(1) , but with less specificity.

PS: As you can see from MDN Browser Support - IE8 does not support this, so for IE8 you are out of luck for a clean CSS solution.

Answer 2

You cannot hide the list , but if the list item is is only child, then this is both first and last , so you can hide this:

 li:first-child:last-child { display: none; }