¿Hay alguna manera de ocultar el enésimo artículo en una lista con CSS?

Question

Ejemplo:

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

¿Es posible ocultar el segundo elemento con CSS?

Answer 1

nth-child es de hecho la forma en CSS.

En CSS puro, la sintaxis es simplemente

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

nth-of-type(2) obras en este caso también.

Editar: Aunque esta es la respuesta de CSS, como se señaló, esto es CSS3 e implementado only in some browsers. IE y FF3 e inferiores no son compatibles de forma nativa. Implementado en FF3.5, Konqueror e incorrectamente en Chrome, Safari y Opera. nth-of-type() implementaciones son mejores.

El soporte en buscadores más antiguos requerirá javascript (simplificado con jQuery, et al). El selector jQuery se describe en los documentos Selectors/nthChild, y lo anterior se puede lograr con $("li.mybutton:nth-child(2)").hide().

Answer 2

n-th child pseudo selectors hacer esto, pero todavía no son compatibles y no lo serán por un tiempo. Necesitarás Javascript/jQuery o escribir una clase especial para los artículos que deseas ocultar o simplemente ocultar los artículos directamente.

Así es como usted lo haría con jQuery:

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

Answer 3

ul.mybuttons li:first-child { 
    display:none; 
} 

Answer 4

que se estableció por primera vez la segunda li como class = "hidden_li" en el archivo HTML.

Ejemplo:

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

entonces voy a diseñarlo como esto:

.hidden_li{ 
    visibility : hidden; 
    height : 0px; 
    width : 0px; 
    margin : 0px; 
    padding : 0px; 
    overflow : hidden; 
}