Aninhamento nativo de CSS

O aninhamento nativo do CSS (compatibilidade básica desde 2024, em todos os navegadores modernos) permite escrever regras CSS dentro de outras regras, reproduzindo a sintaxe de aninhamento antes disponível apenas nos pré-processadores Sass/Less. As regras aninhadas herdam automaticamente o contexto do seletor pai.

Escreva seletores filhos dentro do bloco de regras pai. O navegador combina automaticamente os seletores pai e filho. Um & (seletor de aninhamento) referencia explicitamente o seletor pai para modificadores e pseudoclasses.

& representa explicitamente o seletor pai nas regras aninhadas. Use-o para pseudoclasses (&:hover), pseudo-elementos (&::before), classes modificadoras (&.active) e seletores de atributo (&[disabled]). Sem &, as regras aninhadas criam seletores descendentes.

Aninhe naturalmente as regras de pseudo-elementos dentro do pai: .button { &::before { content: ""; } &::after { content: ""; } }. Isso mantém todos os estilos do botão juntos, evitando a repetição de seletores exigida no CSS plano.

Consultas de mídia e outras regras @ podem ser aninhadas dentro de regras (Chrome 112+, Firefox 117+): .card { padding: 1rem; @media (min-width: 768px) { padding: 2rem; } }. Os estilos responsivos ficam junto ao elemento que afetam, em vez de permanecerem em um bloco separado de consulta de mídia no final do arquivo.

O aninhamento não altera as regras de especificidade — o seletor combinado tem a mesma especificidade de quando é escrito sem aninhamento. .card .title escrito com ou sem aninhamento tem a mesma especificidade (0,2,0). O aninhamento é uma conveniência sintática, não uma alteração de especificidade.

Um seletor aninhado sem & cria um seletor descendente: .card { .title {} } é compilado como .card .title. Com &: .card { &.active {} } é compilado como .card.active (sem espaço — classe modificadora, não descendente).

O aninhamento nativo não é ideal para BEM — os seletores .block__element e .block--modifier são cadeias de caracteres, e o aninhamento não consegue construí-los apenas com &. Use aninhamento para pseudoclasses e estruturas de componentes aninhadas, em vez de concatenação de cadeias de caracteres do BEM (que ainda requer um pré-processador).

A maior parte da sintaxe de aninhamento do Sass é idêntica à do aninhamento nativo do CSS. Exceção: o Sass permite a concatenação de cadeias de caracteres com &-modifier, o que o CSS nativo não permite. Migre verificando os padrões &- ou &__ e achatando essas regras específicas, enquanto mantém os demais aninhamentos.

O aninhamento nativo do CSS é compatível com Chrome 112+, Firefox 117+ e Safari 16.5+. Para oferecer compatibilidade com navegadores mais antigos, use PostCSS com postcss-nesting para transformar a sintaxe de aninhamento nativo em CSS plano durante a compilação, permitindo escrever hoje usando o aninhamento nativo.

O Chrome DevTools mostra regras aninhadas no painel de estilos em sua forma aninhada. Clicar em uma regra aninhada leva ao local correto do código-fonte no painel de fontes. Depurar CSS aninhado é tão claro quanto depurar CSS plano nas versões modernas do DevTools.

Qual é a diferença entre o aninhamento com e sem o seletor &?

O aninhamento nativo do CSS permite uma sintaxe aninhada semelhante à do Sass em CSS puro. O seletor & cria seletores compostos para pseudoclasses, pseudo-elementos e modificadores. Consultas de mídia aninhadas mantêm os estilos responsivos junto aos elementos correspondentes. O PostCSS transforma o aninhamento nativo para navegadores mais antigos, permitindo uma adoção gradual hoje.