Ferramenta para montar Quantity Queries em CSS
O que é uma quantity query?
Copie e cole o código abaixo em seus estilos
// Seu código vai aparecer aqui
Sua quantity query será refletida nos itens abaixo por uma mudança de cor.
Uma quantity query (consulta de quantidade) é um seletor CSS complexo que permite que estilos sejam aplicados a elementos com base no número de irmãos.
Estilos são aplicados a todos os elementos quando há pelo menos 5 itens e irmãos presentes.
.item:nth-last-child(n+5):first-child, .item:nth-last-child(n+5):first-child ~ .item {}
Estilos são aplicados a todos os elementos quando há no máximo 10 itens e irmãos presentes.
.item:nth-last-child(-n+10):first-child, .item:nth-last-child(-n+10):first-child ~ .item {}
Estilos são aplicados quando o número de elementos está entre 3 e 5.
.item:nth-last-child(n+3):nth-last-child(-n+5):first-child, .item:nth-last-child(n+3):nth-last-child(-n+5):first-child ~ .item {}