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>

none isn't a valid value for the visibility property. Try either hidden or visible — j08691
– j08691, Commented Sep 26, 2016 at 17:24
I don't understand why my answer was marked negative.The person who did this will you explain why ?? because the question is about to hide list item by css he mentioned #tab4.I write css and hide #tab4 named item. I answered it using css So why ????? — Asifuzzaman
– Asifuzzaman, Commented Sep 26, 2016 at 17:32
As @avrahamcool suggested, you're misusing id - what you have would be better as classes ...<li class="tab"> and the active one <li class="tab active">. If you really want an id on each tab they must be unique. Sensible ones could be id="desc", id="features" etc. But many people use ids where classes would do a better job. e.g. If you had more than one tab-set a tab set might have an id, not the tabs. <div class="tabs-widget-wrap" id="tab-set-1"> — Stephen P
– Stephen P, Commented Sep 26, 2016 at 20:57

Marcin · Accepted Answer · 2016-09-26 17:29:04Z

2

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

edited Sep 26, 2016 at 17:29

answered Sep 26, 2016 at 17:17

Marcin

1,4921 gold badge14 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tyler Roper Over a year ago

Your ID has a # in it.

Asifuzzaman · Accepted Answer · 2016-09-27 03:38:02Z

1

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

edited Sep 27, 2016 at 3:38

answered Sep 26, 2016 at 17:24

Asifuzzaman

1,7931 gold badge16 silver badges32 bronze badges

1 Comment

Stephen P Over a year ago

@Dano007 - I am not the downvoter, just making a guess as to why it was downvoted ... it could be because it does not explain how & why it works. Stackoverflow considers "good" questions and answers as ones that will help people in the future, not just the original poster. This solves your problem but doesn't teach you anything, and probably wouldn't help some future person with a very similar but not exactly the same issue. The tooltip on downvote is "This answer is not useful" and some people will downvote based on its lack of future usefulness.

Ghayyour Ahmed Butt · Accepted Answer · 2016-09-26 17:29:21Z

1

#tab4 {
    display: none;
}

This should work

answered Sep 26, 2016 at 17:29

Ghayyour Ahmed Butt

3931 gold badge2 silver badges13 bronze badges

Comments

Rob · Accepted Answer · 2016-09-26 17:27:10Z

0

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.

answered Sep 26, 2016 at 17:27

Rob

15.2k30 gold badges49 silver badges73 bronze badges

Comments

Narxx · Accepted Answer · 2016-09-26 17:22:19Z

-1

You try to select by name property.

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

answered Sep 26, 2016 at 17:22

Narxx

8,2995 gold badges29 silver badges34 bronze badges

Collectives™ on Stack Overflow

Hide html list item using css

5 Answers 5

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related