Verstecke die letzten Einträge in der Liste mit css

Question

Ich werde die ersten Elemente in einer "Liste" verstecken. Beispiel: Ich habe 100 Gegenstände, aber ich werde nur die ERSTEN 25 Gegenstände zeigen. Wie kann ich das mit CSS machen? zu verbergen sucht alle von 26+

Artikel wie dieser Code

<a href="" class="onegame">...</a> 
<a href="" class="onegame">...</a> 
<a href="" class="onegame">...</a> 

Answer 1

Nachfolgend finden Sie alle Listeneinträge nach dem 25. Listeneintrag verbergen.

CSS:

a:nth-of-type(1n+26) 
{ 
    display:none; 
} 

Demo: auch https://jsfiddle.net/ck0tks6x/

Answer 2

Ihre Liste in Listenelemente zu setzen ist eine gute Idee für die Zugänglichkeit und einfache Styling.

.mylist li { 
 
    display:none; 
 
    } 
 

 
    .mylist li:nth-child(1), 
 
    .mylist li:nth-child(2), 
 
    .mylist li:nth-child(3), 
 
    /* through to */ 
 
    .mylist li:nth-child(25) 
 
    { 
 
    display:list-item; 
 
    }

<ul class="mylist"> 
 
    <li><a href="" class="onegame">...</a></li> 
 
    <li><a href="" class="onegame">...</a></li> 
 
    <li><a href="" class="onegame">...</a></li> 
 
    </ul> 
 

 

 

Answer 3

können Sie tun das mit nth-child(n+x), zum Beispiel:

a:nth-child(n+3) { 
 
    font-weight: bold; 
 
}

<a href="" class="onegame">...</a> 
 
<a href="" class="onegame">...</a> 
 
<a href="" class="onegame">...</a> 
 
<a href="" class="onegame">...</a> 
 
<a href="" class="onegame">...</a> 
 
<a href="" class="onegame">...</a> 
 
<a href="" class="onegame">...</a> 
 
<a href="" class="onegame">...</a> 
 
<a href="" class="onegame">...</a> 
 
<a href="" class="onegame">...</a> 
 
<a href="" class="onegame">...</a> 
 
<a href="" class="onegame">...</a>