最初の4つの要素を除くすべてを非表示

Question

無限の要素があります。そして、最初の4つの要素を除くすべてを隠すことをやりたい（with：セレクターではない）

そしてクリックをすべて見せたいと思っています。これはCSSで可能ですか？

<ul> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li>/*must hide*/ 
    <li></li>/*must hide*/ 
    <li></li>/*must hide*/ 
    <li></li>/*must hide*/ 
     ........ /*must hide foreva*/ 
</ul> 

Answer 1

あなたは:nth-childを使用して、以下のソリューションを使用することができます。

ul li:nth-child(n+5) { 
 
    display:none; 
 
} 
 
input[type=checkbox]:checked + ul li { 
 
    display:list-item; 
 
}

<input type="checkbox"/> 
 
<ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li>4</li> 
 
    <li>5</li> 
 
    <li>6</li> 
 
    <li>7</li> 
 
    <li>8</li> 
 
    <li>9</li> 
 
    <li>10</li> 
 
    <li>11</li> 
 
    <li>12</li> 
 
</ul>

あなたはアイテムの可視性を変更するために<input type="checkbox"/>を使用することができます。

---

また、（隠されたアイテムを計算する他の方法）:nth-child:notとを使用することができます。

ul li:not(:nth-child(-n + 4)) { 
 
    display:none; 
 
} 
 
input[type=checkbox]:checked + ul li { 
 
    display:list-item; 
 
}

<input type="checkbox"/> 
 
<ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li>4</li> 
 
    <li>5</li> 
 
    <li>6</li> 
 
    <li>7</li> 
 
    <li>8</li> 
 
    <li>9</li> 
 
    <li>10</li> 
 
    <li>11</li> 
 
    <li>12</li> 
 
</ul>

Answer 2

:not()疑似クラスと:nth-child()を組み合わせることができます。

ul li:not(:nth-child(-n + 4)) { 
 
    display: none; 
 
}

<ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li>4</li> 
 
    <li>5</li> 
 
    <li>6</li> 
 
    <li>7</li> 
 
    <li>8</li> 
 
</ul>

Answer 3

それは簡単です、あなたはCSSについてお読みください。

使用この：

ul li:nth-child(n+4){display:none;}