Hide html list item using css

Question

I would like to remove (or make not visible) #tab4 from the end users view. I thought I could use something like

    #tab4 {
    visibilty: none;
    :
}

However thats not working. Do I need to target the ID as well?

---

<div id="tabs-widget-wrap">
                <ul id="tabs">
                    <li id=""><a href="#" name="#tab1" id="">Description</a></li>
                    <li id=""><a href="#" name="#tab2" id="">Features</a></li>              
                    <li id="current"><a href="#" name="#tab3" id="current">Policies</a></li>    
                    <li id=""><a href="#" name="#tab4" id="">Availability</a></li>
                    <li id=""><a href="#" name="#tab5" id="">Review (0) </a></li>
                </ul>

Answer 1

<li id="tab4"><a href="#">Availability</a></li>

CSS:

#tab4 {
    display: none;
}

jQuery:

$('#tab4').hide();

Inline HTML:

<li style="display:none;"><a href="#">Availability</a></li>

Answer 2

Hello just use the below css to hide #tab4

   #tabs-widget-wrap ul li:nth-child(4)
   {
   display: none;
   }

:nth-child(4) it allows you to specifically choose to change only the 4th element in the parent element. Here #tab4 is your 4th element

Answer 3

There is no property visibility:none; it's visibility:hidden;

In addition, you have no id of tab4 for that element. It should be id="tab4" Putting that into the attribute name won't do it.

Answer 4

#tab4 {
    display: none;
}

This should work

Answer 5

You try to select by name property.

a[name="#tab4"] {
    visibility: none;
}