Zen coding
imbrication d'éléments
div>p
div>p>em
succession d'éléments
div+p
<div></div>
<p></p>
div+p+div
<div></div>
<p></p>
<div></div>
répétition d'éléments
div*3
<div></div>
<div></div>
<div></div>
div>p*3
<div>
<p></p>
<p></p>
<p></p>
</div>
(div>p)*3
<div>
<p></p>
</div>
<div>
<p></p>
</div>
<div>
<p></p>
</div>
attributs
div[title="exemple"]
<div title="exemple"></div>
div[title="exemple"]>p[title="test"]*3
<div title="exemple">
<p title="test"></p>
<p title="test"></p>
<p title="test"></p>
</div>
classes
div.menu
<div class="menu"></div>
div.menu>p.item*3
<div class="menu">
<p class="item"></p>
<p class="item"></p>
<p class="item"></p>
div>
</div>
identifiants
div#menu
<div id="menu"></div>
h1#titre+div#menu>p.item*3+
<h1 id="titre"></h1>
<div id="menu">
<p class="item"></p>
<p class="item"></p>
<p class="item"></p>
</div>
contenus
div{un contenu en exemple}
<div>un contenu en exemplev/div>
div{un contenu en exemple}>p{etc...}*3
<div>un contenu en exemple
p>etc.../p>
p>etc.../p>
p>etc.../p>
</div>
div{un contenu en exemple}+div{etc...}*3
<div>un contenu en exemple</div>
<div>etc...</div>
<div>etc...</div>
<div>etc...</div>
numérotation
div{exemple$@}*5
<div>exemple1</div>
<div>exemple2</div>
<div>exemple3</div>
<div>exemple4</div>
<div>exemple5</div>
div{exemple$@-}*5
<div>exemple5</div>
<div>exemple4</div>
<div>exemple3</div>
<div>exemple2</div>
<div>exemple1</div>
div{exemple$@100}*5
<div>exemple100</div>
<div>exemple101</div>
<div>exemple102</div>
<div>exemple103</div>
<div>exemple104</div>
div{exemple$@-100}*5
<div>exemple104</div>
<div>exemple103</div>
<div>exemple102</div>
<div>exemple101</div>
<div>exemple100</div>
A la manière des contenus on peut également numéroter les attributs, les classes et les identifiants
div[title="section$@"]*5
<div title="section1"></div>
<div title="section2"></div>
<div title="section3"></div>
<div title="section4"></div>
<div title="section5"></div>
div.section$@*5
<div class="section1"></div>
<div class="section2"></div>
<div class="section3"></div>
<div class="section4"></div>
<div class="section5"></div>
div#section$@*5
<div id="section1"></div>
<div id="section2"></div>
<div id="section3"></div>
<div id="section4"></div>
<div id="section5"></div>