Hide first li in ul with CSS

Question

I have a navigation menu that I'd like to hide the first item in it. e.g.

<ul>
   <li>Home</li>
   <li>About</li>
   <li>
      <ul>
         <li>Item 1</li>
         <li>Item 2</li>
         <li>Item 3</li>
      </ul>
   </li>
</ul>

I then hide the first element like this in CSS:

li:first-child{
   visibility: hidden;
}

But then what happens is that all the first li items in the navigation disspears, like 'Item 1' in the navigation menu. How would I select only the 'home' li item and hide it?

Related to : http://stackoverflow.com/questions/977883/selecting-only-first-level-elements-in-jquery , http://stackoverflow.com/questions/3892111/how-to-select-only-top-level-li-in-recursive-menu , http://stackoverflow.com/questions/9084705/jquery-child-selector-only-select-top-level-child-elements — Milche Patern, Mar 01 '13 at 13:45

score 26 · Accepted Answer · answered Mar 01 '13 at 13:35

26

Give your first ul a class "yourclass", then .yourclass > li:first-child { visibility: hidden; }

To hide the first child of the second ul use .yourclass > li > ul > li:first-child

answered Mar 01 '13 at 13:35

Merec

2,751
1
14
21

score 2 · Answer 2 · edited Mar 01 '13 at 13:43

2

Assign a id to the first ul and then apply the css style to that id only?

<ul id="someid">
   <li>Home</li>
   <li>About</li>
   <li>
      <ul>
         <li>Item 1</li>
         <li>Item 2</li>
         <li>Item 3</li>
      </ul>
   </li>
</ul>

#someid > li:first-child{
   visibility: hidden;
}

Also see http://www.w3.org/TR/CSS2/selector.html

edited Mar 01 '13 at 13:43

Adrian

2,233
1
22
33

answered Mar 01 '13 at 13:33

Techmonk

1,459
12
20

True, since the other one is also child of the first ul element! – Techmonk Mar 01 '13 at 13:41
Edit it with the ">" selector. At least this worked on my test. – Adrian Mar 01 '13 at 13:43

score 2 · Answer 3 · answered Mar 01 '13 at 13:43

ul > li:first-child { (note you can do :last-child to target the last item)
display: none;
}

Another option, especially if you need to target other children for other reasons is to use :nth-child(). Inside the parentheses you put a number http://www.w3schools.com/cssref/sel_nth-child.asp

Using nth-child to mimick the same as the above.

ul > li:nth-child(1) {
display: none;
}

Note that nth-child is not supported by IE without a jquery library like modernizr to help it out.

PSR · Answer 4 · 2013-03-01T14:13:38.433

1

<ul id="abc">
  <li>Home</li>
  <li>About</li>
  <li>
  <ul>
     <li>Item 1</li>
     <li>Item 2</li>
     <li>Item 3</li>
  </ul>
</li>
</ul>
  #abc > li:first-child{
   display: none;
   }

edited Mar 01 '13 at 14:13

answered Mar 01 '13 at 13:39

PSR

39,804
41
111
151

This will hide both as well – Techmonk Mar 01 '13 at 13:45
The CSS rule will not work. You're still targeting all the first children that is `
` regardless of the level of nesting.

Terry

Mar 01 '13 at 14:12

vitaminRAD · Answer 5 · 2013-03-01T13:48:00.000

0

I would consider using:

body> ul>:first-child {
    display: none;
}

Rather than:

ul li:first-child{
    visibility: hidden;
}

edited Mar 01 '13 at 13:48

answered Mar 01 '13 at 13:37

vitaminRAD

32
5

1

Any reason you'd use this rather? – Mar 01 '13 at 13:38
Very rarely is my navigation a direct descendant of the body, why does this make more sense to you??? – Sean Mar 01 '13 at 14:27

Milche Patern · Answer 6 · 2013-03-01T13:46:52.460

0

You would need the element or class which is above the first ul, then specify

css soluce : {parent-selector} > ul > li.

jQuery soluce : $( "ul > li" );

edited Mar 01 '13 at 13:46

answered Mar 01 '13 at 13:41

Milche Patern

19,632
6
35
52

Hide first li in ul with CSS

6 Answers6