1

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>

1 Resposta 1

4

Da para fazer com nth-child sim, pegando do sexto filho para frente e dando dispay: none usando @media

Veja o exemplo abaixo e execute em tela cheia para testar. Nesse exemplo não importa quantas LI tenham depois no item 5, elas só vão aparecer se a tela for maior que 800px

@media screen and (max-width: 800px) {
  .teste li:nth-child(n+6){
    display: none;
  }
}
<ul class="teste">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
  <li>só aparece em tela larga 6</li>
  <li>só aparece em tela larga 7</li>
</ul>

1
  • 1
    perfeito, valeu! 29/07/2020 às 14:12

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .