Hide first li in ul with CSS

Question

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

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

Answer 1

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

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

Answer 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

Answer 3

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.

Answer 4

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

Answer 5

I would consider using:

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

Rather than:

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

Answer 6

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" );