ZenCoding HTML Selectors

zencoding-html-cheatshet.md

ZenCoding HTML Selectors

note, most of these examples are taken from: http://code.google.com/p/zen-coding/wiki/ZenHTMLSelectorsEn

Id

E#name

converts to:

<div id="name"></div>

Class

E.name

converts to

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

Multiple classes

div.one.two

converts to

<div class="one two"></div>

Mixed Ids and Classes

div#name.one.two

converts to:

<div id="name" class="one two"></div>

Nesting

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>

Adjacent Selectors

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> 

Attributes: E[attr]

a[href]

converts to:

<a href=""></a>

and

span[title="Hello" rel]

compiles to

<span title="Hello" rel=""></span>

Filters

p.title|e

converts to

<p class="title"></p>

Repeating elements, operations

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>

Automatically incremented repeating elements

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>

E+

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>