Emmet: Subida `^` e Multiplicação `*`

A última aula abordou "descer" com > e "dispor horizontalmente" com +. Quando sua estrutura fica complexa o suficiente para que "um irmão precise voltar um nível", esses dois sozinhos encontram um obstáculo — é aí que você precisa de ^ para subir um nível. Para criar 5, 10 ou mais elementos idênticos de uma vez, use * para repetir.

1. O Que Você Vai Aprender

• Semântica do operador de subida ^: "saltar para fora" do nível de aninhamento atual em um
• Subida multinível ^^^: saltar vários níveis em sucessão para alcançar contextos externos
• Semântica do operador de multiplicação *N: repetir o elemento precedente N vezes
• Como *N e > trabalham juntos: > muda o contexto, *N aplica-se ao nível atual
• Combinando estruturas de árvore complexas: o padrão "permaneça profundo, suba ao nível especificado" com parênteses

2. A História Real de Uma Desenvolvedora Front-End

(1) Ponto de Dor: Aninhamento Multinível e Ficar "Preso no Fundo"

Alice está refatorando uma página inicial de e-commerce, convertendo um layout plano em uma estrutura semântica de três seções HTML5 (header + main + footer). Ela usa body>header+main+footer da última aula para a camada mais externa, depois desce dentro de header com >nav>ul>li*5>a. Mas após terminar a seção header, surge um problema: footer deveria seguir main como irmão, mas ela descobre que footer acaba dentro de header — porque > continua empurrando o contexto cada vez mais fundo, e + apenas acrescenta no nível mais recente.

Pior, ela precisa construir uma tabela de produtos de 6 linhas por 5 colunas. 6 linhas com *6 não é problema, mas cada linha precisa de 5 células td repetidas — codificar manualmente 30 elementos td significa redigitar ou escrever um longo e difícil de ler tr>td*5*6. Alice se pergunta: se ao menos * pudesse aninhar dentro de * adequadamente.

(2) Como ^ e * Resolvem Isso

O Emmet fornece dois operadores complementares para resolver ambos os problemas:

Subida ^: quando você termina de escrever profundamente dentro de header e quer saltar de volta ao nível body para acrescentar footer, um ^ "sai" um nível, retornando à posição de irmão do pai. Alice só precisa adicionar um ^ no final da subárvore header, depois acrescentar main+footer:

body>header>nav>ul>li*5>a^^main+footer

^^ sobe dois níveis a partir de dentro de ul (primeiro sai de ul, depois sai de nav, de volta ao nível header), então +main+footer se tornam irmãos de header.

Multiplicação *: o * do Emmet pode ser colocado após qualquer elemento para repeti-lo N vezes — e * pode aninhar > dentro para formar subestruturas. Uma tabela inteira é uma linha:

table>(tr>td*5)*6

tr>td*5 é um "padrão de linha", envolvido com *6 para repetir o padrão 6 vezes. De 30 elementos td para uma linha de abreviação — de 5 minutos para 8 segundos.

(3) Benefícios

^ e * são a combinação central para o tratamento de "estruturas complexas" do Emmet. A subida permite controlar precisamente a qual nível cada elemento pertence; a multiplicação permite gerar em lote estruturas repetidas em uma linha. Após esta aula, Alice combina body>header+main+footer com ^^^ para controle perfeito de nível e escreve uma tabela 6x5 com * em uma linha — de 12 minutos para 25 segundos. O agrupamento () da próxima aula tornará esses operadores ainda mais poderosos quando combinados.

3. O Operador de Subida ^: Retornar ao Nível Pai

^ significa subir — mover a posição dos elementos subsequentes de volta do nível atual para o nível pai. Ele aborda um cenário comum: você terminou uma subárvore profundamente dentro de uma estrutura aninhada e quer que o próximo elemento seja irmão de um "ancestral" em vez de permanecer preso no nível atual.

(1) Ilustração de Subida Única

Ponto-Chave: A subida é um dos operadores mais confusos do Emmet para iniciantes. Seu "contexto anterior" refere-se ao nó pai na árvore sintática, não "o último elemento que digitei". Em outras palavras, em div>ul>li^p, o ^ faz p ser irmão de ul (ambos dentro de div), não irmão de li (dentro de li).

4. O Operador de Multiplicação *: Repetir Elementos em Lote

*N significa repetir — duplicar o elemento precedente N vezes. Este é o operador central do Emmet para lidar com estruturas repetidas como "N itens de lista", "N linhas de tabela" e "N cartões".

Dica: N em *N deve ser um inteiro positivo. *1 é válido (equivalente a sem repetição), mas geralmente é simplificado para a forma singular. *0 no Emmet expande para nada (não gera elementos).

(1) Escopo da Multiplicação

* aplica-se apenas ao elemento imediatamente precedente, seguindo a regra do "contexto local". Para repetir uma subárvore aninhada inteira como uma unidade, você deve usar parênteses () para agrupamento (aula 6):

5. Exemplos Práticos

Os 5 exemplos a seguir cobrem todos os cenários principais para ^ e * — de subida única a subida multinível, de repetição simples a repetição agrupada aninhada.

▶ Exemplo: Subida Única div+div>p>span+em^bq (Dificuldade: ★★)

O problema deixado da última aula: como fazer bq ser irmão de p. A resposta é adicionar um ^.

Abreviação:

div+div>p>span+em^bq

Expande para:

<div></div>
<div>
  <p><span></span><em></em></p>
  <blockquote></blockquote>
</div>

Saída:

TEXT 📖 Somente leitura

📋 Copy

Análise: div+div cria dois divs irmãos, >p desce para o segundo div para colocar p, >span+em coloca dois irmãos dentro de p. Finalmente, ^ aciona uma subida: do nível p para o nível div (pai de p), então bq se torna irmão de p — ambos são filhos do segundo div. Sem ^, bq acabaria dentro de p, irmão de span e em.

▶ Exemplo: Subida Multinível div+div>p>span+em^^^bq (Dificuldade: ★★)

Três ^ consecutivos sobem até o nível raiz.

Abreviação:

div+div>p>span+em^^^bq

Expande para:

<div></div>
<div>
  <p><span></span><em></em></p>
</div>
<blockquote></blockquote>

Saída:

TEXT 📖 Somente leitura

📋 Copy

`^^^` sobe três vezes: primeiro de p para o segundo div, segundo do segundo div para a raiz, terceiro tenta novamente da raiz mas não há "nível mais alto" (permanece no lugar). Então bq acaba como irmão do segundo div, um filho direto da raiz. Nota: o nível raiz não tem contêiner explícito (não há div mais externo), então bq aparece ao lado de div. Esta "abreviação sem raiz" é automaticamente envolvida por `<body>` nos navegadores, mas esteja ciente de como as mudanças de nível afetam os seletores CSS subsequentes.

▶ Exemplo: Multiplicação ul>li*5 (Dificuldade: ★)

O mais básico "gerar em lote 5 elementos li".

Abreviação:

ul>li*5

Expande para:

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Saída:

TEXT 📖 Somente leitura

📋 Copy

5 elementos li vazios, todos filhos diretos de ul. `*5` age diretamente em li — sem estrutura complexa necessária. Este é o padrão de maior frequência do Emmet para "menu de navegação de 5 itens", "lista de tarefas de 5 itens", "5 cartões de recursos" e cenários similares. Combine com preenchimento de conteúdo (aula 9) para dar a cada item um texto diferente.

▶ Exemplo: Repetir + Aninhar ul>li*3>a (Dificuldade: ★)

A combinação clássica > + * — a como filho único de cada li.

Abreviação:

ul>li*3>a

Expande para:

<ul>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
</ul>

Saída:

TEXT 📖 Somente leitura

📋 Copy

`*3` apenas repete li, e cada li contém um a via >. Para também repetir a (3 a por li), use parênteses: ul>li*>a*3 ou envolva a em um grupo. Para repetir "(li e a)" como uma unidade, use (li>a)*3 (aula 6, agrupamento). Esta é uma armadilha clássica de "escopo" do Emmet.

▶ Exemplo: Agrupar + Repetir (div>dl>(dt+dd)*3)+footer>p (Dificuldade: ★★)

O exemplo combinado desta aula: multiplicação aninhada + agrupamento (() é da aula 6 — antecipado aqui).

Abreviação:

(div>dl>(dt+dd)*3)+footer>p

Expande para:

<div>
  <dl>
    <dt></dt>
    <dd></dd>
    <dt></dt>
    <dd></dd>
    <dt></dt>
    <dd></dd>
  </dl>
</div>
<footer>
  <p></p>
</footer>

Saída:

TEXT 📖 Somente leitura

📋 Copy

Análise: o (div>dl>...) mais externo atua como um grupo, servindo como uma "raiz virtual". Dentro do grupo, div contém dl, e (dt+dd)*3 dentro de dl repete o par irmão dt+dd 3 vezes. Depois + faz footer ser irmão de div (footer é uma subárvore separada e independente), e >p dentro de footer coloca um p. A linha inteira de abreviação expande para 13 linhas de HTML: 1 dl, 6 dt/dd, 1 footer, 1 p. Este é o padrão típico do Emmet para escrever um bloco de lista de definição em uma linha.

6. Exemplo Completo: Tabela de Produtos 6x5

Use * aninhado e agrupamento para construir uma tabela de produtos de 6 linhas e 5 colunas com uma única linha de abreviação.

▶ Exemplo: Tabela de Produtos 6x5 (Dificuldade: ★★)

Abreviação:

table>(tr>td*5)*6

Expande para:

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

Saída:

TEXT 📖 Somente leitura

📋 Copy

Análise: tr>td*5 é o modelo de "uma linha de células", e o *6 externo repete este modelo 6 vezes. Os parênteses (tr>td*5) garantem que td*5 só se aplica dentro de tr (5 td todos no mesmo tr), em vez de ser diretamente repetido pelo *6 externo. Dois operadores * aninhados formam uma grade 2D. Sem parênteses, tr>td*5*6 ainda produziria um resultado 6x5 (Emmet analisa como 5 td por tr, tr repetido 6 vezes), mas a semântica é pouco clara — não recomendado.

❓ Perguntas Frequentes

P: Antes de o operador ^ existir, como as pessoas lidavam com necessidades de subida? R: As versões iniciais do Emmet de fato não tinham operador de subida. Você tinha que usar "agrupamento + redescida" para simular a subida. Por exemplo, div>header>p+span^(main+footer) não existia; você escreveria (header>p+span)+(main+footer) usando agrupamento como solução alternativa. Mas o agrupamento é menos legível e requer redescida. ^ foi adicionado em 2013 como uma "escotilha de escape" especificamente para resolver este ponto de dor.

P: ^ pode subir até a raiz? O que acontece se subir demais? R: Sim, você pode continuar subindo, mas apenas até a raiz (raiz virtual). Subir além da raiz (ex.: ^^^^^bq no nível raiz) apenas permanece na raiz — sem erro. O Emmet trata a raiz como o "piso térreo", e símbolos ^ em excesso são silenciosamente ignorados.

P: Para o que li*0 expande? R: *0 no Emmet oficial gera 0 elementos (completamente ignorado), mas algumas implementações de editor podem deixar um único elemento li vazio. Evite escrever *0 — apenas escreva li explicitamente. Se você espera "0 elementos" e seu editor lhe dá 1 vazio, isso é uma diferença de implementação de editor.

P: Em div>span*3>p, onde o p acaba? R: Expande para <div><span><p></p></span><span><p></p></span><span><p></p></span></div> — p é filho de cada span (porque o contexto mais próximo é span). *3 apenas repete span, e p segue cada span. Este é um dos padrões mais confusos para iniciantes: distinguir o escopo de * (apenas o elemento imediatamente precedente) do escopo do > subsequente (o contexto mais próximo).

📖 Resumo

• ^ significa subir um nível, movendo o contexto de um filho de volta ao seu pai
• ^^ e ^^^ realizam subidas consecutivas; subir além da raiz para na raiz virtual
• *N repete o elemento imediatamente precedente N vezes, agindo no elemento mais próximo atual
• *N e > cooperam: > muda o contexto, *N age no elemento mais próximo no novo contexto
• Multiplicação aninhada (ex.: *5 tr contendo *6 td) requer parênteses () para agrupamento (próxima aula)
• (tr>td*5)*6 é o padrão de abreviação padrão para uma "tabela 2D"

📝 Exercícios

1. Básico (Dificuldade: ★): Escreva 3 abreviações Emmet usando * que expandam para: (a) 5 li; (b) 1 ul contendo 3 li, cada li contendo 1 a; (c) 1 ul contendo 1 li, o li contendo 3 a.
2. Intermediário (Dificuldade: ★★): Analise como (nav>ul>li*3>a)+main+footer deveria expandir (esboce no papel primeiro, depois verifique expandindo). Depois reescreva como uma versão equivalente usando ^ (sem parênteses).
3. Desafio (Dificuldade: ★★★): Escreva uma única abreviação Emmet para uma tabela de tabuleiro de xadrez 8x8 (a primeira célula é <th> de cabeçalho, o resto são <td>). Explique por que esta estrutura requer parênteses para agrupamento. Também escreva a "versão errada" sem parênteses e compare os resultados reais da expansão.

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós