Elementos Aninhados:
Para adicionar elementos aninhados, utilize o sinal de > entre os elementos. Exemplo:
main>div>p
O resultado será:
<main>
<div>
<p></p>
</div>
</main>
Atalhos para Abreviar Código HTML
Inserindo Texto no Elemento:
Para inserir texto diretamente no elemento, utilize chaves {}. Exemplo:
main>div>p{texto texto texto}
O resultado será:
<main>
<div>
<p>texto texto texto</p>
</div>
</main>
Elementos no Mesmo Nível:
Para adicionar elementos no mesmo nível, utilize o sinal de +. Exemplo:
div>h1{título título}+p{texto texto texto}
O resultado será:
<div>
<h1>título título</h1>
<p>texto texto texto</p>
</div>
Adicionando Classes:
Para adicionar uma classe a um elemento, utilize o ponto . seguido do nome da classe. Exemplo:
div>h1{título título}+p.mark{texto texto texto}
O resultado será:
<div>
<h1>título título</h1>
<p class="mark">texto texto texto</p>
</div>
Adicionando IDs:
Para adicionar um ID a um elemento, utilize o sinal de cerquilha # seguido do nome do ID. Exemplo:
div>h1#capitulo{título título}+p{texto texto texto}
O resultado será:
<div>
<h1 id="capitulo">título título</h1>
<p>texto texto texto</p>
</div>
Criando Listas:
Para criar múltiplos itens de um mesmo elemento, utilize o asterisco * seguido do número de repetições. Exemplo:
div>ul>li*5
O resultado será:
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
Multiplicando com Subelementos:
Para criar múltiplos elementos com subelementos, multiplique o elemento e adicione o subelemento. Exemplo:
div>ul>li*5>strong
O resultado será:
<div>
<ul>
<li><strong></strong></li>
<li><strong></strong></li>
<li><strong></strong></li>
<li><strong></strong></li>
<li><strong></strong></li>
</ul>
</div>
Criando Vários IDs:
Para criar múltiplos IDs, utilize o cifrão $ para enumerar. Exemplo:
ul>li#item$*5>strong
O resultado será:
<ul>
<li id="item1"><strong></strong></li>
<li id="item2"><strong></strong></li>
<li id="item3"><strong></strong></li>
<li id="item4"><strong></strong></li>
<li id="item5"><strong></strong></li>
</ul>
Adicionando Comentários:
Para adicionar comentários, utilize |c. Isso ajuda a identificar onde terminam os elementos com classe ou ID. Exemplo:
section#secao$*2>article.artigo*3>h1{Título}+p{Argumentos}*5|c
O resultado será:
<section id="secao1">
<article class="artigo">
<h1>Título</h1>
<p>Argumentos</p>
<p>Argumentos</p>
<p>Argumentos</p>
<p>Argumentos</p>
<p>Argumentos</p>
</article>
<!-- /.artigo -->
<article class="artigo">
<h1>Título</h1>
<p>Argumentos</p>
<p>Argumentos</p>
<p>Argumentos</p>
<p>Argumentos</p>
<p>Argumentos</p>
</article>
<!-- /.artigo -->
<article class="artigo">
<h1>Título</h1>
<p>Argumentos</p>
<p>Argumentos</p>
<p>Argumentos</p>
<p>Argumentos</p>
<p>Argumentos</p>
</article>
<!-- /.artigo -->
</section>
<!-- /#secao1 -->
<section id="secao2">
<article class="artigo">
<h1>Título</h1>
<p>Argumentos</p>
<p>Argumentos</p>
<p>Argumentos</p>
<p>Argumentos</p>
<p>Argumentos</p>
</article>
<!-- /.artigo -->
<article class="artigo">
<h1>Título</h1>
<p>Argumentos</p>
<p>Argumentos</p>
<p>Argumentos</p>
<p>Argumentos</p>
<p>Argumentos</p>
</article>
<!-- /.artigo -->
<article class="artigo">
<h1>Título</h1>
<p>Argumentos</p>
<p>Argumentos</p>
<p>Argumentos</p>
<p>Argumentos</p>
<p>Argumentos</p>
</article>
<!-- /.artigo -->
</section>
<!-- /#secao2 -->
Elementos com Subelementos no Mesmo Nível:
Para criar elementos com subelementos no mesmo nível, utilize parênteses (). Exemplo:
(header>h1{Capítulo})+(main>h2{Matéria}+p{lorem})+footer>p{rodapé}
O resultado será:
<header>
<h1>Capítulo</h1>
</header>
<main>
<h2>Matéria</h2>
<p>lorem</p>
</main>
<footer>
<p>rodapé</p>
</footer>
Adicionando Atributos aos Elementos:
Para adicionar atributos aos elementos, utilize colchetes []. Exemplo:
table>(thead>th[scope="col"]*3)+(tbody>tr*3>th[scope="row"]+td*2)
O resultado será:
<table>
<thead>
<th scope="col"></th>
<th scope="col"></th>
<th scope="col"></th>
</thead>
<tbody>
<tr>
<th scope="row"></th>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row"></th>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row"></th>
<td></td>
<td></td>
</tr>
</tbody>
</table>