Enrique Valdivieso Enrique Valdivieso - 2 months ago 6
CSS Question

CSS display: none; href

I have this code:

<ul class="nav nav-tabs nav-freetime">

<li class="active">
<a class="btn-nav-tab" href="#mod2" data-toggle="tab">Bar El Gordo</a>
</li>

<li>
<a class="btn-nav-tab" href="#mod3" data-toggle="tab">'La Tabernilla'</a>
</li>
<li>
<a class="btn-nav-tab" href="#mod4" data-toggle="tab">Restaurante La Muralla</a>
</li>




i tried to use

.nav .btn-nav-tab{ display: none; }


but it hides everything and I want it to only hide mod1.
I try to

a[href="#mod1"]{ display: none; }


but didnt work

Answer

In this example, you could use either nth-child (MDN documentation) or last-child (MDN documentation)

.nav li:last-child {display: none}

or

.nav li:nth-child(3) {display: none}