☰

CSS でリスト内の n 番目の項目を非表示にする方法はありますか? 質問する

tag-icon • tag-icon css
CSS でリスト内の n 番目の項目を非表示にする方法はありますか? 質問する

例：

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

CSS を使用して 2 番目の項目を非表示にすることは可能ですか?

ベストアンサー1

n番目の子まさに CSS のやり方です。

純粋なCSSでは、構文は単純に

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

nth-of-type(2)この場合も機能します。

編集：これはCSSの回答ですが、前述のように、これはCSS3であり、実装されています一部のブラウザのみIE および FF3 以下では、これをネイティブにサポートしていません。FF3.5、Konqueror では実装されていますが、Chrome、Safari、Opera では正しく実装されていません。nth-of-type()実装はより優れています。

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

おすすめ記事