zencoding

階層構造

">" は子要素に移動

ul>li

で展開すると

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

になる

"^" は親要素に移動 "+"で並列要素の作成

div>div>div>p+p^hr

で展開すると

div>div>div>p^

になる。地味にEmmetだと動作が違ったりして戸惑った。

"*"は繰り返し

div*3>p+p+hr

はこうなった。

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

idやclassを追記する

"#"でid="" を "."でclass="" を追加出来る

div#main>li.item

で

<div id="main">
    <li class="item"></li>
</div>

"$"で$の個数に合わせた連番を出力出来る。

div#main>li.item-$$$*5

で

<div id="main">
    <li class="item-001"></li>
    <li class="item-002"></li>
    <li class="item-003"></li>
    <li class="item-004"></li>
    <li class="item-005"></li>
</div>

になる。使い慣れるまでは支配関係で混乱してぐちゃぐちゃになりそうだね。