Calling li's in css

Question

i am working on a site with this fieldset with ul. It is a joomla template where I am logged in as a publisher. This is the menu where you are able to change your articles.

What I would like to happen is that the first a and the last two a's are not visible. (like with a display:none). But I don't know how to call the lines in css. I know :nth-child() exists but It did not work the way I tried it.

<fieldset>
<ul class="nav nav-tabs">
::before
<li class>
<a href="#editor" data-toggle="tab">Content</a>
</li>
<li class="active">
<a href="#publishing" data-toggle="tab">Publishing</a>
</li>
<li class>
<a href="#language" data-toggle="tab">Language</a>
</li>
<li class>
<a href="#metadata" data-toggle="tab">Metadata</a>
</li>
::after
</ul>

Is there anyone who knows how to call them in css? I am sorry if this question is not really expert level. Thanks

Answer 1

You can do it with simple CSS

.nav li:first-child,
.nav li:nth-child(3),
.nav li:nth-child(4) {
    display: none;
}

But this is not a clean way. The edit form should be redesigned by an override. If you haven't the privilege to do that, ask the template developer.

Answer 2

Hide all and show the active one.

.nav-tabs li {display: none;}
.nav-tabs li.active {display: list-item} /* or block, if LIs are floated or you want them block */

Answer 3

Put the same class to the li's you want to hide and call them on your css.

Example:

<li class="hide-me"></li>

li.hide-me { display: none;}

BTW if you plan on changing the display value later on to show them separately id suggest you to use an id instead of a class.