CSS Nesting: Aninhamento Nativo sem Pré-processador

Aninhar seletores dentro de outros sempre foi um recurso exclusivo de pré-processadores como Sass e Less. Com o CSS Nesting nativo, esse mesmo aninhamento passou a funcionar direto no CSS puro, sem precisar de nenhuma ferramenta de build.

O jeito antigo (sem pré-processador)

.card {
    padding: 16px;
}

.card .title {
    font-size: 18px;
}

.card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

Cada seletor relacionado ao .card precisa ser repetido separadamente.

Como funciona o Nesting nativo

Agora, é possível aninhar as regras dentro do próprio seletor pai, usando & para representar o elemento atual:

.card {
    padding: 16px;

    .title {
        font-size: 18px;
    }

    &:hover {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
}

O resultado final é equivalente ao CSS "desaninhado" do primeiro exemplo, mas escrito de forma mais próxima da estrutura do HTML.

Aninhando media queries

Um dos maiores ganhos do Nesting nativo é poder aninhar @media direto dentro da regra, sem quebrar o contexto do seletor:

.container {
    display: flex;

    @media (max-width: 768px) {
        flex-direction: column;
    }
}

Combinando com outros seletores

.btn {
    background: #12A8C3;

    & + & {
        margin-left: 8px;
    }
}

Aqui, & + & aplica a margem apenas quando um .btn vem logo depois de outro .btn.

Vantagens

• Menos repetição do seletor pai em regras relacionadas.
• CSS mais próximo da estrutura visual do HTML, mais fácil de ler.
• Não depende mais de Sass, Less ou de um passo de build para ter aninhamento.
• Funciona junto com @media, @supports e pseudo-classes como :hover e :has().

Compatibilidade

O suporte já é bom nos navegadores modernos, mas vale sempre conferir antes de usar em produção, principalmente se o projeto precisar suportar navegadores mais antigos.

caniuse

Conclusão

O CSS Nesting nativo traz uma das funcionalidades mais úteis dos pré-processadores para dentro do próprio CSS, simplificando a organização de arquivos sem exigir nenhuma ferramenta extra no projeto.