css - CSS nth-child で最初の 3 つのリスト項目を表示し、残りを非表示にする方法は?

Question

CSSセレクターで定義された数を超えて複数の子を選択することは可能ですか?

＃3を過ぎたすべてのリストアイテムを非表示にしたい：

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li> <!-- hide this -->
  <li>5</li> <!-- hide this -->
</ul>

<style>
  ul li:nth-child(X) {
    display: none;
  }
</style>

Answer 1

どのブラウザがこれをサポートしているかはわかりませんが、式を :nth-of-type() に渡すことができます:

ul li:nth-of-type(1n+4) {display: none;} /* should match your case */

詳細: http://www.w3schools.com/cssref/sel_nth-of-type.asp

編集

最初のバージョンは機能しますが有効ではないため、(n+4) から (1n+4) に変更しました。これをメディアクエリで使用して、小さな画面でカットダウンされたアイテムを非表示にします.

---

例：

b:nth-of-type(1n+4){ opacity:.3; }

<b>1</b>
<b>2</b>
<b>3</b>
<b>4</b>
<b>5</b>