Normally we use CSS selectors to find and tear apart HTML. Sergey Chikuyonok's jujitsu move is to do the opposite. With Zen Coding you take a CSS selector like this:

PLAIN TEXT
HTML:
  1.  
  2. html:xt>div#header>div#logo+ul#nav>li.item-$*5>a
  3.  

and it generates an HTML structure like this:

PLAIN TEXT
HTML:
  1.  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  5.         <title></title>
  6.         <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  7. </head>
  9.         <div id="header">
  10.                 <div id="logo"></div>
  11.                 <ul id="nav">
  12.                         <li class="item-1"><a href=""></a></li>
  13.                         <li class="item-2"><a href=""></a></li>
  14.                         <li class="item-3"><a href=""></a></li>
  15.                         <li class="item-4"><a href=""></a></li>
  16.                         <li class="item-5"><a href=""></a></li>
  17.                 </ul>
  18.         </div>
  19. </body>
  20. </html>
  21.  

You can check out a demo or try out support in various editors (Aptana to TextMate).

Now I want to create a Bespin plugin to do this too!


Related News :