Hide first li с CSS не работает

Question

Я использую тему WordPress, я хочу скрыть первый ли, но он не работает, теперь он скрывает все ли

Вот мой HTML-код

<div class="nav">
<ul class="nav-tabs nav-justified">
<li class="active">
<a class="tab-link" data-toggle="tab" id="fusion-tab-test" href="#tab-28c1d4fbddafcd3aa2c">
<h4 class="fusion-tab-heading" data-fontsize="20" data-lineheight="28">
<i class="fontawesome-icon fa-boxes fas" style="font-size:25px;"></i>Test</h4></a>
</li>
<li>
<a class="tab-link" data-toggle="tab" id="fusion-tab-seminars" href="#tab-d7887fb7187717f626d">
<h4 class="fusion-tab-heading" data-fontsize="20" data-lineheight="28">
<i class="fontawesome-icon fa-bullhorn fas" style="font-size:25px;"></i>Seminars</h4></a>
</li>
<li><a class="tab-link" data-toggle="tab" id="fusion-tab-onetoonemeetings" href="#tab-11300dbcbe0344a62d2">
<h4 class="fusion-tab-heading" data-fontsize="20" data-lineheight="28">
<i class="fontawesome-icon fa-user-friends fas" style="font-size:25px;"></i>One to one meetings</h4></a>
</li>
</li>
</ul>
</div>

Мой код CSS

 .nav li:first-child { visibility: hidden; }

Answer 1

Попробуйте этот код

.nav ul li:first-of-type{
    display: none;
}

<div class="nav">
    <ul class="nav-tabs nav-justified">
        <li class="active">
            <a class="tab-link" data-toggle="tab" id="fusion-tab-test" href="#tab-28c1d4fbddafcd3aa2c">
                <h4 class="fusion-tab-heading" data-fontsize="20" data-lineheight="28">
                    <i class="fontawesome-icon fa-boxes fas" style="font-size:25px;"></i>
                    Test
                </h4>
            </a>
        </li>
        <li>
            <a class="tab-link" data-toggle="tab" id="fusion-tab-seminars" href="#tab-d7887fb7187717f626d">
                <h4 class="fusion-tab-heading" data-fontsize="20" data-lineheight="28">
                    <i class="fontawesome-icon fa-bullhorn fas" style="font-size:25px;"></i>
                    Seminars
                </h4>
            </a>
        </li>
        <li>
            <a class="tab-link" data-toggle="tab" id="fusion-tab-onetoonemeetings" href="#tab-11300dbcbe0344a62d2">
                <h4 class="fusion-tab-heading" data-fontsize="20" data-lineheight="28">
                    <i class="fontawesome-icon fa-user-friends fas" style="font-size:25px;"></i>
                    One to one meetings
                </h4>
            </a>
        </li>
    </ul>
</div>

Answer 2

Попробуйте display:none;

См. Здесь разницу между visibility:hidden и display:none: В чем разница между видимостью: скрытой и отображаемой: нет?

.nav li:first-child { display:none; }

<div class="nav">
<ul class="nav-tabs nav-justified">
<li class="active">
<a class="tab-link" data-toggle="tab" id="fusion-tab-test" href="#tab-28c1d4fbddafcd3aa2c">
<h4 class="fusion-tab-heading" data-fontsize="20" data-lineheight="28">
<i class="fontawesome-icon fa-boxes fas" style="font-size:25px;"></i>Test</h4></a>
</li>
<li>
<a class="tab-link" data-toggle="tab" id="fusion-tab-seminars" href="#tab-d7887fb7187717f626d">
<h4 class="fusion-tab-heading" data-fontsize="20" data-lineheight="28">
<i class="fontawesome-icon fa-bullhorn fas" style="font-size:25px;"></i>Seminars</h4></a>
</li>
<li><a class="tab-link" data-toggle="tab" id="fusion-tab-onetoonemeetings" href="#tab-11300dbcbe0344a62d2">
<h4 class="fusion-tab-heading" data-fontsize="20" data-lineheight="28">
<i class="fontawesome-icon fa-user-friends fas" style="font-size:25px;"></i>One to one meetings</h4></a>
</li>
</li>
</ul>
</div>