Hide first li with CSS is not working

Question

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

Works perfectly fine, https://jsfiddle.net/5rkgbt2a/ Are you perhaps not aware of the difference between visibility (hidden still reserves the _space_ the element would need), and `display:none` …? — CBroe, Jul 03 '18 at 12:57

score 4 · Answer 1 · answered Jul 03 '18 at 12:56

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>

it's still hiding all the tabs – A Raja Jul 03 '18 at 13:00 — A Raja, Jul 03 '18 at 13:00
what browser do you use?? – לבני מלכה Jul 03 '18 at 13:02 — לבני מלכה, Jul 03 '18 at 13:02
i am checking this in the iPhone version – A Raja Jul 03 '18 at 13:05 — A Raja, Jul 03 '18 at 13:05
you can add class to first li and in css hide it – לבני מלכה Jul 03 '18 at 13:15 — לבני מלכה, Jul 03 '18 at 13:15

score 1 · Answer 2 · answered Jul 03 '18 at 13:07

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>

Thanks it's hiding all li and i am write this css in my wordpress custom css — A Raja, Jul 03 '18 at 13:13

Hide first li with CSS is not working

2 Answers2