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

n-th child pseudo selectors do this, but they're not widely supported yet and won't be for a while. You'll either need Javascript / jQuery or to write out a special class for the items you want to hide or just hide the items directly.

Here's how you'd do it with jQuery:

$("ul.mybuttons li:nth-child(2)").hide();

Answer 2

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().