# Gerador de quantity queries com :has()

> Monte o seletor que muda o layout pelo número de filhos e veja a condição valer na prévia.

URL: https://dpw.dev/ferramentas/gerador-quantity-queries/

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.

Esta página tem um gerador interativo no navegador. Exemplo: para estilizar `.list` quando o elemento tiver 5 itens ou mais, o CSS é:

```css
/* 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.

Suporte: funciona em todos os navegadores atuais ([Baseline](https://webstatus.dev/features/has)).

## Leia no blog

- [CSS Condicional com :has e :nth-last-child](https://dpw.dev/css/css-condicional-has-nth-last-child/)

## Conceitos Fundamentais de CSS

Quando dois seletores casam com o mesmo elemento, quem decide qual regra vence? O livro explica seletores, especificidade e cascata em 237 páginas sobre como o CSS funciona por dentro. [Conheça o livro](https://dpw.dev/livro-conceitos-fundamentais-css/?utm_source=blog&utm_medium=cta_ferramentas)

---

Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml