note, most of these examples are taken from: http://code.google.com/p/zen-coding/wiki/ZenHTMLSelectorsEn
E#name
converts to:
<div id="name"></div>
E.name
converts to
<div class="name"></div>
div.one.two
converts to
<div class="one two"></div>
div#name.one.two
converts to:
<div id="name" class="one two"></div>
ul>li
converts to:
<ul>
<li></li>
</ul>
and
table>tr>td
converts to:
<table>
<tr>
<td></td>
</tr>
</table>
and
ul#sidenav>li.item
converts to:
<ul id="sidenav">
<li class="item"></li>
</ul>
p+p
converts to:
<p></p>
<p></p>
so:
div#content>p.one+p.two
converts to:
<div id="content">
<p class="one"></p>
<p class="two"></p>
</div>
a[href]
converts to:
<a href=""></a>
and
span[title="Hello" rel]
compiles to
<span title="Hello" rel=""></span>
p.title|e
converts to
<p class="title"></p>
p*3
converts to:
<p></p>
<p></p>
<p></p>
and
ul#name>li.item*3
converts to:
<ul id="name">
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>
p.name-$*3
converts to:
<p class="name-1"></p>
<p class="name-2"></p>
<p class="name-3"></p>
and
select>option#item-$*3
converts to
<select name="" id="">
<option value="" id="item-1"></option>
<option value="" id="item-2"></option>
<option value="" id="item-3"></option>
</select>
from @jonschlinkert: I don't like this concept at all. Maybe it's fine for "on the fly" zencoding, but it's bad implementation. If anything, they should have done E>
ul+
converts to
<ul>
<li></li>
</ul>
and
table+
converts to
<table>
<tr>
<td></td>
</tr>
</table>
and
dl+
converts to
<dl>
<dt></dt>
<dd></dd>
</dl>