css - CSS でリスト項目の範囲を選択する

Question

動的な数の項目を持つリスト (メニュー) があります。

<ul id="menu">
    <li>bla</li>
    <li>bla</li>
    <li>bla</li>
    <li>bla</li>
    <li>bla</li>
    <li>bla</li>
    <li>bla</li>
</ul>

ブラウザの幅が 1000px 未満の場合、メディアクエリを使用してメニューのスタイルを変更しています。

@media screen AND (max-width: 999px) {
    ul#menu li:nth-child(4+) {
          visibility: hidden;
    }
}

明らかに、これは機能しませんが、達成したいことを示しています: 4 番目以降のリスト要素を非表示にします。

リスト項目のさまざまなクラスでこれを行う方法があることは認識していますが、純粋な CSS で実現したいと考えています。

score 1 · Accepted Answer

:nth-child(n + 4)それらをターゲットにするために使用できます：

ul#menu li:nth-child(n + 4) {
    visibility: hidden;  // display: none?
}

:nth-child(-n + 3)を使用して、最初の 4 つの要素のみをターゲットにすることもできます。

1 に答える 1