Magento

You just add a line :

 div#page>div.logo+ul#navigation>li*5>a

and expand it with a shortcut key :

 <div id="page">
      <div class="logo"></div>
      <ul id="navigation">
              <li><a href=""></a></li>
              <li><a href=""></a></li>
              <li><a href=""></a></li>
              <li><a href=""></a></li>
              <li><a href=""></a></li>
      </ul>
 </div>

So you have a “css like” structure.

Zen coding support officialy some major editor :

• aptana/eclipse/zend/
• textmate
• espresso
• komodo edit
• notepad++
• Pspad

and some third party :

• Dreamweaver (Windows, Mac)
• Sublime Text (Windows)
• UltraEdit (Windows)
• TopStyle (Windows)
• GEdit (crossplatform) — Franck Marcia’s plugin, Mike Crittenden’s plugin
• BBEdit/TextWrangler (Mac) — external download
• Visual Studio (Windows) — external download
• EmEditor (Windows) — external download
• Sakura Editor (Windows) — external download
• NetBeans (crossplatform)

• ntelliJ IDEA/WebStorm/PHPStorm (crossplatform)
• Emacs (crossplatform)
• Vim (crossplatform)
• ReSharper plugin for Visual Studio

You can find more information about zen coding :

http://code.google.com/p/zen-coding/

If you have an IDE based on eclipse :

In your IDE, go to : - help > Install new software - in the field “work with”, add http://zen-coding.ru/eclipse/updates/ - check “zen coding” - Confirm dialog box and accept conditions - relaunch your IDE

Now you have a new menu “zen coding” and your editor is ready. just type div.itworks and cmd+e (on mac)and your code will expand.