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