Hide first li in ul with CSS

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.


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


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

Tags:

Html

Css