## Emmet cheat sheet

### HTML

Unknown abbreviations will be expanded as tags. E.g. foo => <foo></foo>.

Child: > | Sibling: + | Climb-up: ^
div>ul>li <div> <ul> <li></li> </ul>

</div>

div+p

<div></div>

<p></p>

div>p>span+em^bq

<div>

<p><span></span><em></em></p>

<blockquote></blockquote>

</div>

Multiplication: * | Custom attributes | Text: {}
ul>li*3 <ul> <li></li> <li></li> <li></li>

</ul>

p[title="Hello world"]

<p title="Hello world"></p>

td[rowspan=2 colspan=3 title]

<td rowspan="2" colspan="3" title=""></td>

a{Click me}

<a href="">Click me</a>

p{@lorem4}

<p>Lorem Ipsum quisque etiam.</p>

Item numbering: $ | Id and class attributes | Implicit tag names
ul>li.item$*3 <ul> <li class="item1"></li> <li class="item2"></li> <li class="item3"></li>

</ul>

h$[title=item$$$]{Header $}*3

<h1 title="item001">Header 1</li>

<h2 title="item002">Header 2</li>

<h3 title="item003">Header 3</li>

ul>li.item$3-5

<ul>

<li class="item3"></li>

<li class="item4"></li>

<li class="item5"></li>

</ul>

#header

<div id="header"></div>

.title

<div class="title"></div>

form#search.wide

<form id="search" class="wide"></form>

p.class1.class2

<p class="class1 class2"></p>

.class

<div class="class"></div>

em>.class

<em><span class="class"></span></em>

ul>.class

<ul>

<li class="class"></li>

</ul>

table>.row>.col

<table>

<tr class="row">

<td class="col"></td>

</tr>

</table>

Grouping: () | Lorem Ipsum generator: @lorem |
div>(header>ul>li*2>a)+footer>p <div> <header> <ul> <li><a href=""></a></li>

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

</ul>

</header>

<footer>

<p></p>

</footer>

</div>

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

<div>

<dl>

<dt></dt>

<dd></dd>

<dt></dt>

<dd></dd>

</dl>

</div>

<footer>

<p></p>

</footer>

ul.generic-list>.item{@lorem10}*4

<ul class="generic-list">

<li class="item">Lorem Ipsum instructior quaestio suspendisse insolens; Hinc rebum sapientem. Alienum.</li>

<li class="item">Lorem Ipsum utroque splendide reprimique verterem antiopam soluta bibendum philosophia.</li>

<li class="item">Lorem Ipsum saepe accusam. Justo assentior vivendum iaculis eligendi ipsum.</li>

<li class="item">Lorem Ipsum dolorem? Nulla platea elitr, invenire animal torquent democritum.</li>

</ul>

p{@lorem20}

<p>Lorem Ipsum tale libris! Ius! Rationibus habeo? Splendide volutpat senserit. Reprimique antiopam duis reprehendunt ancillae sem expetenda eum? Singulis? Epicuri.</p>

Note that the Lorem Ipsum generator abbreviation is used differently in standard Emmet. E.g. p*4>lorem80 is written as p{@lorem80}*4 in RJ Emmet. The Lorem Ipsum abbreviation variable "@lorem" is put inside text braces {}, just as plain text.

### Wrap with Abbreviation

This is a very useful feature of Emmet and lets you enter an abbreviation, expands it and place currently selected content in the last element of generated snippet.

You can also use placeholders $# to control where selected text should be inserted.

###### Wrapping individual lines

This feature is very useful when you need to wrap text in tags. For example lists. Below are a few examples.

Selected text

Information

Content

News

About

ul>li* gives the following output:

<ul>

<li>Information</li>

<li>Content</li>

<li>News</li>

<li>About</li>

</ul>

Selected lines are wrapped inside HTML tags.

Selected text

Information

Content

News

About

nav>ul.nav>li.nav-item$*>a gives the following output:

<nav>

<ul class="nav">

<li class="nav-item1"><a href="">Information</a></li>

<li class="nav-item2"><a href="">Content</a></li>

<li class="nav-item3"><a href="">News</a></li>

<li class="nav-item4"><a href="">About</a></li>

</ul>

</nav>

###### Control output with placeholders $#

Emmet insert selected text inside the latest element. If you want more control over where the selected text is inserted you can use placeholders $#.

Selected text

Information

Content

News

About

ul>li[title=$#]*>{$#}+img[alt=$#] gives the output:

<ul>

<li title="Information">Information<img src="" alt="Information" /></li>

<li title="Content">Content<img src="" alt="Content" /></li>

<li title="News">News<img src="" alt="News" /></li>

<li title="About">About<img src="" alt="About" /></li>

</ul>

### CSS

It's possible to use vendor prefix with abbreviations. E.g. -moz-ac will expand into -moz-align-content: |;

You can also use the macro prefixes -, -v-, -m-, -w- to expand into several lines with predefined vendor prefixes. Note that multi cursors are used to edit each line.

- or -v-bb

-webkit-border-bottom: |;

-moz-border-bottom: |;

border-bottom: |;

-w-bb

-webkit-border-bottom: |;

border-bottom: |;

-m-bb

-moz-border-bottom: |;

border-bottom: |;