Hide ul and li tag when has ul has only one li tag

Question

Please, don't confuse this question with others published on stackoverflow.

NOTE: Hide list with one element with pure CSS my question involves the parent tag.

I have these css rule:

ul {
    padding: 5px;
}

ul > li:only-child {
    display: none;
}

This rule hides the first ul tag when its only one. But the space of the ul tag is still there.

How I can hide both ul and li when its onliy one li declared in my html?

Answer 1

The extra spacing you see even after hiding the li elements is because you have included a padding for the parent ul element.

So the solution is to remove the padding from the ul element and apply it on the child li elements.