Hide a <li> item class - css

Question

I want to hide this bit: <li class="categories">Kατηγορίες<ul> as seen in the code below (also see here https://poiimata.com/poets/):
<li class="categories">Kατηγορίες<ul>
<li class="cat-item cat-item-123">
<a href="https://poiimata.com/category/robert-frost/" >Robert Frost</a>
</li>
<li class="cat-item cat-item-124">
<a href="https://poiimata.com/categoryshlain-goldberg/" >Shlain</a>
</li>
I tried using
.categories {
display:none;
}
but the result was to hide all items below that one (the whole list).

Answer 1

That happen because you've an invalid HTML code in :
<li class="categories">Kατηγορίες<ul>
_________________________________^^^^
The browser will evaluate your code to the below format, that why all your li's become hidden :
<ul>
<li class="categories">Kατηγορίες
<ul>
<li class="cat-item cat-item-123">Robert Frost
</li>
<li class="cat-item cat-item-124">Shlain
</li>
</ul>
</li>
</ul>
Instead it should be :
<ul>
<li class="categories">Kατηγορίες</li>
<li class="cat-item cat-item-123">Robert Frost
</li>
<li class="cat-item cat-item-124">Shlain
</li>
</ul>
Snippet:
.categories {
display: none;
}
<ul>
<li class="categories">Kατηγορίες</li>
<li class="cat-item cat-item-123">Robert Frost
</li>
<li class="cat-item cat-item-124">Shlain
</li>
</ul>

Answer 2

It appears you just have an error in your HTML. You use an incorrect closing tag and therefore hide the entire thing.
<li class="categories">Kατηγορίες<ul> <!--- closed <li> with <ul> --->
<li class="cat-item cat-item-123">
<a href="https://poiimata.com/category/robert-frost/" >Robert Frost</a>
</li>
<li class="cat-item cat-item-124">
<a href="https://poiimata.com/categoryshlain-goldberg/" >Shlain</a>
</li>
Try instead:
<ul class="categories">
<li >Kατηγορίες<li>
<li class="cat-item cat-item-123">
<a href="https://poiimata.com/category/robert-frost/" >Robert Frost</a>
</li>
<li class="cat-item cat-item-124">
<a href="https://poiimata.com/categoryshlain-goldberg/" >Shlain</a>
</li>
</ul>
and change CSS to
.categories:first-child {
display:none;
}
That's just one way of accomplishing it. There are quite a few different angles you can take.

Answer 3

Since li contains tags that you do not need to hide, you need to masked the hidden text. for example like this:
.categories {
font-size: .1%;
}
.categories ul {
font-size: 100000%;
}
if only child elements is not a bug...