Vamos supor que eu tenha uma lista dinâmica auto-completar normal, que possui 5 itens na versão desktop, e quando fosse mobile, através de media queries eu gostaria que aparecesse somente 3 itens, mas eu não quero usar overflow e nem passar uma classe para cada item e esconder pelo nome, tampouco usar programação de javascript, apenas usando CSS, é possível, como por exemplo, para esconder o ultimo item eu uso: ul li:last-child { display: none}
, o que quero exatamente saber é se existe uma maneira de limitar no CSS uma determinada lista usando hierarquia direto no CSS. Tipo fazendo uma ideia tosca que não existe, mas que serve para ilustrar o que estou buscando, porém que eu desconheço uma solução real no CSS: ul li:limit(6) { ... }
, deu pra entender o raciocínio? Espero que sim.
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
</ul>
Exemplo que eu não quero:
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li class="hide">item 4</li>
<li class="hide">item 5</li>
</ul>