CSSでリストのn番目のアイテムを非表示にする方法はありますか？

Question

例：

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

それはCSSを使用して第二項目を非表示にすることは可能ですか？

Answer 1

nth-childが実際にCSSの方法です。純粋なCSSで

、構文が単純すぎて、この場合の

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

nth-of-type(2)作品です。

編集：これはCSSの回答ですが、これはCSS3であり、only in some browsersが実装されています。 IEとFF3以下ではこれをネイティブにサポートしていません。 FF3.5、Konquerorで実装され、Chrome、Safari、Operaで間違っています。 nth-of-type()の実装が優れています。

古いブラウザでのサポートにはjavascript（jQueryなどで簡略化）が必要です。 jQueryセレクタはSelectors/nthChildドキュメントに記述されており、上記は$("li.mybutton:nth-child(2)").hide()で実現できます。

Answer 2

n-th child pseudo selectorsこれを実行しますが、まだ広くサポートされておらず、しばらくお待ちください。 Javascript/jQueryが必要になるか、非表示にするアイテムの特別なクラスを作成するか、アイテムを直接非表示にするだけです。ここで

あなたはjQueryを使ってそれを行うだろう方法は次のとおりです。

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

Answer 3

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

Answer 4

私が最初にHTMLファイルにクラス=「hidden_​​li」として二リチウムを設定します。

例：

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

それから私はこのようにそれをスタイリングします：この質問にはあまり価値を追加するための

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