## 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: |;