Demos ao vivo e editáveis de nesting nativo do CSS, do seletor :has(), container queries, subgrid, @layer, :is(), color-mix() e text-wrap: balance, com uma tabela de suporte Baseline.
O CSS puro agora faz trabalhos que antes exigiam Sass ou JavaScript. O nesting nativo agrupa regras relacionadas, :has() estiliza um elemento pai com base nos filhos, container queries adaptam um componente à própria largura e subgrid alinha itens aninhados com a grid externa. Os quatro chegaram ao Baseline em 2023, então os navegadores atuais dão suporte a eles.
Os principais recursos de relance
Recurso
Substitui
Baseline desde
Nesting
Nesting no estilo Sass em um pré-processador
:has()
JavaScript que alterna uma classe no elemento pai
Container size queries
Media queries de viewport dentro de componentes
Subgrid
Alturas fixas no código para alinhar linhas de cards
Cada recurso abaixo tem uma demo que você pode editar, e o card de container query responde a um controle deslizante, para você vê-lo mudar de layout sem redimensionar a janela. A tabela de suporte lista o ano em que cada recurso virou Baseline, ou seja, passou a funcionar nas versões mais recentes do Chrome, Edge, Firefox e Safari.
Arraste o controle de largura na demo de container query e veja o card mudar de empilhado para lado a lado.
Edite qualquer exemplo à esquerda. O resultado isolado à direita é redesenhado enquanto você digita.
Confira a tabela de suporte antes de publicar. Baseline significa os quatro principais motores, não versões antigas.
Copie o trecho de que você precisa. Nenhum deles exige etapa de build ou biblioteca.
Mantenha o nesting raso. Dois níveis costumam bastar, e nesting profundo gera seletores longos e de alta especificidade, como acontecia no Sass.
Container queries precisam de um container: defina container-type: inline-size no elemento pai primeiro, senão a regra @container não corresponde a nada.
Envolva as regras com :has() em @supports selector(:has(*)) se navegadores antigos importam para o seu público, para que eles recorram a um fallback limpo.
Use :where() para estilos de biblioteca ou de reset. Ele adiciona especificidade zero, então qualquer pessoa consegue sobrescrevê-lo com uma única classe.
Perguntas frequentes
Ainda preciso do Sass para fazer nesting?
Não só para nesting. O nesting nativo cobre o padrão comum de regras dentro de regras, mais o seletor &. O Sass ainda oferece mixins, loops e funções, embora custom properties e color-mix() tenham assumido boa parte do que as pessoas faziam com ele.
Qual é a diferença entre container queries e media queries?
Uma media query pergunta sobre o viewport, normalmente a largura da janela. Uma container query pergunta sobre um elemento ancestral escolhido. Isso permite que um mesmo componente de card mostre um layout compacto em uma barra lateral estreita e um layout largo na coluna principal da mesma página.
O :has() é lento?
Os motores dos navegadores o otimizaram antes de lançá-lo, e o uso comum não causa problema. Seletores muito amplos como body:has(*) em páginas enormes exigem mais trabalho de correspondência, então ancore o :has() em uma classe de componente específica sempre que puder.
O que significa Baseline?
Baseline é um selo da comunidade da plataforma web que indica que um recurso funciona nas versões atuais do Chrome, Edge, Firefox e Safari. Newly available é a data em que o último deles lançou o recurso. Widely available chega cerca de trinta meses depois.
Quando devo usar subgrid em vez de uma grid aninhada?
Use subgrid quando os filhos de um item da grid precisam se alinhar às trilhas da grid externa, como títulos, textos e botões em uma linha de cards. Uma grid aninhada comum tem trilhas próprias e independentes, então conteúdos de tamanhos diferentes saem do alinhamento.
Como o seletor & funciona no nesting
Dentro de um bloco aninhado, & representa o seletor externo. &:hover aplica a pseudo-classe ao próprio elemento pai, & + & seleciona um irmão do mesmo tipo e .theme-dark & coloca o elemento pai dentro de outro contexto.
Um seletor aninhado sem & é tratado como descendente, então .card { p { } } significa .card p. Navegadores lançados a partir de 2023 também aceitam um nome de elemento simples, como p, no início de uma regra aninhada.
Cascade layers na prática
@layer reset, base, components, utilities; declara uma ordem logo de início. Uma camada posterior vence uma anterior, seja qual for a especificidade, o que acaba com a maioria das brigas entre uma biblioteca de componentes e as suas próprias sobrescritas.
Estilos fora de qualquer camada vencem todos os estilos em camadas. Isso ajuda ao trazer uma folha de estilos antiga para uma estrutura com camadas: deixe as regras legadas sem camada no início e depois mova-as uma de cada vez.
Escolhendo o que adotar primeiro
Se os seus usuários estão em navegadores atuais, nesting e :is() são ganhos gratuitos que só encurtam a sua folha de estilos. Container queries compensam quando você tem componentes reutilizáveis que aparecem em larguras diferentes. Subgrid importa mais para grades de cards e formulários com labels.
Nesting nativo do CSS
Um card estilizado com regras aninhadas
O hover, o título e a variante escura ficam todos dentro de .card. & se refere ao próprio .card.
O seletor de pai :has()
Destacar um campo quando o checkbox dele está marcado
Nenhum script roda neste frame. O label se estiliza sozinho porque tem um input marcado dentro dele.
Mudar o layout de um card só quando ele contém uma imagem
Cards sem imagem mantêm o layout de uma coluna; cards com imagem ganham duas colunas.
Container queries
O CSS por trás da demo com controle deslizante
container-type torna .shelf mensurável; a regra @container então muda o card para uma linha quando a prateleira tem pelo menos 420px de largura.
Subgrid
Linhas de cards que se alinham seja qual for o tamanho do texto
Cada card ocupa três linhas da grid externa e usa subgrid nas próprias linhas, então todo título, corpo e botão ficam na mesma linha.
@layer, :is(), :where(), color-mix() e text-wrap
Cascade layers definem o vencedor pela ordem
O seletor de ID está em uma camada anterior, então a classe simples na camada posterior ainda vence.
:is() e :where() encurtam listas de seletores
:is() assume a especificidade do argumento mais forte, :where() sempre conta como zero.
color-mix() para tons e sombras de hover
Misturar com branco ou preto no espaço oklab gera tons uniformes a partir de uma única cor da marca.
text-wrap: balance para títulos
O segundo título distribui as palavras igualmente entre as linhas em vez de deixar uma palavra sozinha. Os navegadores limitam o balanceamento a blocos curtos de poucas linhas.
Suporte dos navegadores (Baseline)
Status Baseline (versões mais recentes do Chrome, Edge, Firefox e Safari), verificado no MDN em outubro de 2026