Emmet

Emmet is a markup language for expanding CSS rules into HTML

---

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 class="menu">
  <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>
<ul>
  <li class="item3"></li>
  <li class="item4"></li>
  <li class="item5"></li>
  <li class="item6"></li>
  <li class="item7"></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>