TechWeb
Accueil Codage HTML CSS DESIGN XML LaboCSS

Zen coding

imbrication d'éléments

div>p

<div>
<p></p>
</div>

div>p>em

<div>
<p>
<em></em>
</p>
</div>

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>
Valid XHTML 1.0 Strict Valid CSS!

Copyright Gabriel Braun 2007