Child: >
nav>ul>li
Expands to
<nav>
<ul>
<li></li>
</ul>
</nav>
Sibling: +
section>p+p+p
Expands to
<section>
<p></p>
<p></p>
<p></p>
</section>
Climb Up: ^
section>header>h1^footer
Expands to
<section>
<header>
<h1></h1>
</header>
<footer></footer>
</section>
Grouping: ()
section>(header>nav>ul>li)+footer>p
Expands to
<section>
<header>
<nav>
<ul>
<li></li>
</ul>
</nav>
</header>
<footer>
<p></p>
</footer>
</section>
Multiplication: *
ul>li*3
Expands to
<ul>
<li></li>
<li></li>
<li></li>
</ul>
IDs and Classes: .
ul.menu>li.menu__item+li#id_item+li.menu__item#id_2
Expands to
<ul>
<li class="menu__item"></li>
<li id="id_item"></li>
<li class="menu__item" id="id_2"></li>
</ul>
Numbering: $
ul>li.item$*3
ul>li.item$$*3
ul>li.item$@-*3
ul>li.item$@3*5
Expands to
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
</ul>
<ul>
<li class="item01"></li>
<li class="item02"></li>
<li class="item03"></li>
</ul>
<ul>
<li class="item3"></li>
<li class="item2"></li>
<li class="item1"></li>
</ul>
<ul>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ul>
Attributes: []
input[type="text"]
div[data-attr="test"]
Expands to
<input type="text" />
<div data-attr="test"></div>
Text: {}
p{Lorem ipsum}
Expands to
<p>Lorem ipsum</p>
Implicit tags
.default-block
em>.default-inline
ul>.default-list
table>.default-table-row>.default-table-column
Expands to
<div class="default-block"></div>
<em><span class="default-inline"></span></em>
<ul>
<li class="default-list"></li>
</ul>
<table>
<tr class="default-table-row">
<td class="default-table-column"></td>
</tr>
</table>