Is there a way to hide the nth item in a list with CSS?

Question

Example:

<ul class="mybuttons">    <li class="mybutton"></li>    <li class="mybutton"></li>    <li class="mybutton"></li> </ul> 

Is it possible to hide the 2nd item using css?

Answer 1

nth-child is indeed the CSS way.

In pure CSS, the syntax is simply

li.mybutton:nth-child(2){    display:none; } 

nth-of-type(2) works in this case too.

Edit: Though this is the CSS answer, as noted, this is CSS3 and implemented only in some browsers. IE and FF3 and below do not support this natively. Implemented in FF3.5, Konqueror, and incorrectly in Chrome, Safari, and Opera. nth-of-type() implementations are better.

Support in older browsers will require javascript (simplified with jQuery, et al). jQuery selector is described in the Selectors/nthChild docs, and the above can be accomplished with $("li.mybutton:nth-child(2)").hide().