Zen Coding Emmet Cheatsheet

Type your emmet scripts then hit tab to execute them.

Nesting

place element inside previous element

• place element along side previous element

grouping

(.foo>h1)+(.bar>h2) 

will output this:

<div class="foo">
  <h1></h1>
</div>
<div class="bar">
  <h2></h2>
</div>

multiply

ul>li*3

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

Numbering

ul>li.item$*3

<ul>
  <li class="item1"></li>
  <li class="item2"></li>
  <li class="item3"></li>
</ul>

implicit html tags

li for ul and ol tr for table, tbody, thead and tfoot td for tr option for select and optgroup

css

w100 

will generate:

width: 100px;

h10p+m5e 

will generate:

height: 10%;
margin: 5em;

@f 

will generate:

@font-face {
font-family:;
src:url();
}

ov:h and ov-h and ovh 

will generate:

overflow: hidden;

prefixes

-

will generate:

-webkit-super-foo: ;
-moz-super-foo: ;
-ms-super-foo: ;
-o-super-foo: ;
super-foo: ;

gradients

lg(left, #fff 50%, #000) 

will generate:

background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5, #fff), to(#000));
background-image: -webkit-linear-gradient(left, #fff 50%, #000);
background-image: -moz-linear-gradient(left, #fff 50%, #000);
background-image: -o-linear-gradient(left, #fff 50%, #000);
background-image: linear-gradient(left, #fff 50%, #000);

lorum ipsum

lorem10 

will generate:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero delectus.

p*3>lorem5 will generate

<p>Lorem ipsum dolor sit amet.</p>
<p>Voluptates esse aliquam asperiores sunt.</p>
<p>Fugiat eaque laudantium explicabo omnis!</p>