CODEWITHSUNDEEP
csswordpresscss-selectors
A Raja
A Raja

Reputation: 43

Hide first li with CSS is not working

I am using WordPress theme, i want to hide the first li but it's not working, now it hiding all the li

Here is my HTML code 

<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>

My CSS code 

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

Upvotes: 1

Views: 261

Answers (2)

zubair khanzada
zubair khanzada

Reputation: 933

Try This Code

.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>

Upvotes: 1

לבני מלכה
לבני מלכה

Reputation: 16251

Try display:none;

See here difference between visibility:hidden and display:none: What is the difference between visibility:hidden and 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>

Upvotes: 4

Related Questions