zen-codingの意外な使い方

coding

ul+ / ol+ / table+

ul+

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

ol+

<ol>
  <li></li>
</ol>

table+

<table>
  <tr>
     <td></td>
  </tr>
</table>

独自の属性値を設定する

jquery mobile等でdata-role="page"のような特別な属性をzen-codingで付与する方法


div#header[data-role=page]

<div id="header" data-role="page"></div>

idやclassの属性値に連番をふる

・$の部分が連番になる
・$の数を増やすことで桁数を指定できる


ul>li.menu$$*3

<ul>
  <li class="menu01"></li>
  <li class="menu02"></li>
  <li class="menu03"></li>
</ul>