Gerador de quantity queries com :has()
Escolha a condição e a quantidade: o gerador monta o seletor com :has() que muda o pai conforme o número de filhos, e a prévia mostra a condição valendo.
Veja
5 itens: a condição vale
- 5
- 4
- 3
- 2
- 1
- Cada item mostra a posição contada do fim, a que o
:nth-last-child()vê. - Casa com o
:has() - Faz o
:not()barrar
Copie o código
/* Quando o pai tem 5 itens ou mais */
.list:has(> :nth-last-child(n + 5 of li)) {
/* Seus estilos aqui */
}O problema
Muito layout depende de quantos itens chegam: uma grade que aperta as colunas a partir de cinco cards, um rodapé de modal que centraliza um botão sozinho e alinha dois à direita, avatares que se empilham quando há mais de um autor. O CSS não tem uma função que conte filhos.
A quantity query clássica, com li:nth-last-child(n + 5) ~ li, detecta a quantidade, mas o estilo cai nos itens. O pai, que é quem decide o layout (display, gap, colunas), fica de fora.
Como funciona
:nth-last-child(n + 5 of li) pega todo li que tenha pelo menos quatro li depois dele, e esse item só existe se a lista tiver 5 ou mais. Dentro do :has(), a contagem vira uma condição sobre o pai:
.list:has(> :nth-last-child(n + 5 of li)) Troque 5 pelo mínimo. Para um máximo, negue o mínimo seguinte com :not(:has(...)); para uma faixa, junte os dois.
O > limita a contagem aos filhos diretos. Sem ele, o :has() procura em toda a subárvore, e os <li> de uma sublista também contariam.
O of li faz a conta só com os irmãos que casam com o seletor: um título ou um separador dentro da lista fica de fora. A forma clássica, li:nth-last-child(n + 5), sem o of, conta todos os irmãos; é a que aparece no artigo do blog, e as duas funcionam nos navegadores atuais.
As quatro condições
Exemplos com N = 3 e M = 5:
| Condição | Seletor |
|---|---|
| 3 itens ou mais | .list:has(> :nth-last-child(n + 3 of li)) |
| Até 3 itens, ou nenhum | .list:not(:has(> :nth-last-child(n + 4 of li))) |
| Exatamente 3 itens | .list:has(> :nth-last-child(n + 3 of li)):not(:has(> :nth-last-child(n + 4 of li))) |
| De 3 a 5 itens | .list:has(> :nth-last-child(n + 3 of li)):not(:has(> :nth-last-child(n + 6 of li))) |
Quando usar
- Grades que mudam o tamanho mínimo da coluna conforme a quantidade de cards.
- Rodapé de modal: um botão centralizado, dois ou mais alinhados à direita.
- Avatares que se sobrepõem quando o artigo tem mais de um autor.
- Cabeçalhos que trocam o layout quando o menu passa de certo número de links.
Leia no blog
Outras ferramentas
Calculadora de aspect ratio
Descubra a largura ou a altura a partir de uma proporção e leve o aspect-ratio pronto para o CSS.
TipografiaEscala fluida de tipografia e espaçamento
Gere fontes e espaços com clamp() que crescem com a viewport entre um mínimo e um máximo, sem media queries.
FormasPlayground de corner-shape
Teste squircle, bevel, scoop, notch e superellipse() nos cantos e leve o CSS com border-radius e corner-shape.