ZenHTMLSelectorsEn - Zen-Coding - Selectors and Aliases For Zen HTML Plugins - Set of Plugins For HTML and CSS Hi-Speed Coding

ZenHTMLSelectorsEn - zen-coding - Selectors and aliases for Zen HT...
http://code.google.com/p/zen-coding/wiki/ZenHTMLSelectorsEn
My favorites | Sign in
zen-coding
Set of plugins for HTML and CSS hi-speed coding Project Home Search Downloads for Wiki Issues Source Search Search projects
ZenHTMLSelectorsEn
Selectors and aliases for Zen HTML plugins
Updated Feb 17, 2010 by serge....@gmail.com
Zen HTML Selectors

E#name
div#name
<div id="name"></div>
E.name
div.name
<div class="name"></div>
div.one.two
<div class="one two"></div>
div#name.one.two
<div id="name" class="one two"></div>
E>E
head>link
<head> <link/> </head>
table>tr>td
<table> <tr> <td></td> </tr> </table>
ul#name>li.item
<ul id="name"> <li class="item"></li> </ul>
E+E
p+p
<p></p> <p></p>
div#name>p.one+p.two
<div id="name"> <p class="one"></p> <p class="two"></p> </div>
E[attr]
1 de 19
07/09/2013 13:13
Added in v0.6
p[title]
<p title=""></p>
td[colspan=2]
<td colspan="2"></td>
span[title="Hello" rel]
<span title="Hello" rel=""></span>
E|filter
Added in v0.6
p.title|e
<p class="title"></p>
Read Filters for more info
E*N
p*3
<p></p> <p></p> <p></p>
ul#name>li.item*3
<ul id="name"> <li class="item"></li> <li class="item"></li> <li class="item"></li> </ul>
E*N$
p.name-$*3
<p class="name-1"></p> <p class="name-2"></p> <p class="name-3"></p>
select>option#item-$*3
<select> <option id="item-1"></option> <option id="item-2"></option> <option id="item-3"></option> </select>
E+
ul+
<ul> <li></li> </ul>
table+
<table> <tr> <td></td> </tr> </table>
dl+
2 de 19
07/09/2013 13:13
<dl> <dt></dt> <dd></dd> </dl>
Comment by jdem...@gmail.com, Jul 6, 2009 haha, I accidentally entered the zen HTML markup in this comment box! this looks awesome! It would be great to have a textarea on this site like a "sandbox" where you can enter zen HTML and watch it convert ... Comment by yur...@gmail.com, Aug 27, 2009 ul+ Comment by davidmbr...@gmail.com, Sep 23, 2009 Great stuff. It would also be good to note that if you need to create multiple nested items, you can multiply the whole thing by using- E.name*N>E*N - Ex: div.par$2>p*3 - Result: <div class="par1"> <p></p> <p></p> <p></p> </div> <div class="par2"> <p></p> <p></p> <p></p> </div> Comment by piwerek, Sep 28, 2009
div.par$*2>p*3
Comment by project member serge....@gmail.com, Sep 28, 2009 Online demo of Zen Coding is available here: http://zen-coding.ru/demo/ Comment by t.lier...@comprise.de, Sep 28, 2009 html:xs Comment by FashodaD...@gmail.com, Oct 7, 2009 Is it possible to go back up a level in the code. For example if I create a child in a div can I go back and make an adjacent div? eg div.class>h1(go back up the tree somehow)div.adjacent-class Comment by project member serge....@gmail.com, Oct 7, 2009 No, it's not possible and I don't think it would be. We don't want to create a new programming language. You can write 2-3 simple selectors much faster than a complex one. Comment by FashodaD...@gmail.com, Oct 7, 2009 Cool that's fine, just wanted to make sure I wasn't missing an obvious feature. Cheers! Comment by oncem...@gmail.com, Oct 21, 2009 Is it possible to automatic add close comment to the end of the element? See example: div.item would output <div class="item"></div> Comment by ewal...@gmail.com, Nov 21, 2009 @oncemade
3 de 19
07/09/2013 13:13
That's exactly the markup I use :D . I am actually looking for this function as well! tnx Comment by alexey.kvirc@googlemail.com, Nov 24, 2009 : form.auth>(label+input:text)*2 Comment by BigGeorg...@gmail.com, Nov 29, 2009 ?
a.fancybox^href"images/$.jpg"*5>img^src."gallery/images/thumb-$.jpg"
<a class="fancybox" href="images/01.jpg"> <img src="images/thumb-01.jpg class="gallery" alt="" /> </a> ... Comment by project member serge....@gmail.com, Nov 30, 2009 Comment by shoeba...@gmail.com, Dec 8, 2009 @BigGeorgian?? I like the idea of being able to include attributes, but usually attributes are identified with brackets (to follow the paradigm). I would also argue that if this feature is added, it should have the ability to not specify the value, and create an entry point so you can navigate and input through the snippet.
a.fancybox[href=images/$.jpg]*5>img[src=images/thumb-$.jpg]*5 <a class="fancybox" href="images/01.jpg"><img src="images/thumb-01.jpg" alt="" /> </a>
but also:
a.fancybox[href]*5>img[src]*5 <a class="fancybox" href=""><img src="" alt="" /></a>
and the attributes would be tab stops for data entry, like the attributes that are already included in some of them. Multiple attributes would just be:
[src=test.jpg][alt=Test]
Comment by christop...@gmail.com, Dec 28, 2009 Very useful - think the ability to do custom snippets will be useful, going to write a set for working in C# .NET Comment by waldsonp...@gmail.com, Jan 12, 2010 PHPZen inspired by Zen coding. PHPZen generates HTML blocks like Zen-Coding: http://code.google.com/p/zen-php/ Comment by soimz...@gmail.com, Jan 23, 2010 Would love to be able to do attributes. Really like shoebappa's ideas. Comment by project member serge....@gmail.com, Jan 23, 2010 Attributes are available in some latest plugins releases: http://code.google.com/p/zen-coding/source/detail?r=254 Comment by webs%fla...@gtempaccount.com, Feb 18, 2010 Great work, I'm enjoying the new v0.6.1, especially: 1. Grouping of attributes 2. Adding attributes, especially the quicker syntax that allows you to combine attributes
4 de 19
07/09/2013 13:13
Any chance of including the ability to include multiple copies of the original text for the Wrap with Abbreviation action? It appears that something like this used in the comment filter already) Example output:
<li class="nav-foo"><a href="foo.html">foo</a></li>
Comment by project member serge....@gmail.com, Feb 19, 2010 It might be possible with custom snippets and new variable like ${selection} Snippet may look like this:
'my-lia': '<li class="${class}-${selection}"><a href="${selection}.html">${selection}</a></li>'
Or as a new filter. But it definitely won't be a default behavior. Comment by jvander...@gmail.com, Mar 3, 2010 @FashodaDrummer? I realize this comment is a bit late after yours, but you can use parentheses to group items. e.g. your example: div.class>h1(go back up the tree somehow)div.adjacent-class so, lets say you want to come out with
<div class="someClass"> <h1></h1> <h2></h2> </div> <div class="adjacentDiv"> <p></p> </div>
You can express this as: (div.someClass>h1+h2)+(div.adjacentDiv>p) Comment by dimo...@gmail.com, Apr 7, 2010 tr>td.item-{left,right}
<tr> <td class="item-left"></td> <td class="item-right"></td> </tr>
may? Comment by markreid...@gmail.com, Apr 30, 2010 Is there someway to say what should be inside the tags? For example
html>head>title(Test Page)
would produce
<html> <head> <title>Test Page<title> </head> </html>
How would (If i can)i do that Comment by project member serge....@gmail.com, May 1, 2010 markreidyhp, no, there's no way to do this and it won't be available in future. The purpose of ZC is not to write a full HTML page with a single line, but to help you write smaller code chunks. In your case, there's no difference in writing html>head>title, expanding it and writing "Test page" Comment by markreid...@gmail.com, May 1, 2010 Ok, Thanks. Comment by ppaul...@gmail.com, May 3, 2010
table>tr*4>td#idc$*4>img[onclick]
5 de 19
07/09/2013 13:13
Generates:
<table> <tr> <td <td <td <td </tr> <tr> <td <td <td <td </tr> <tr> <td <td <td <td </tr> <tr> <td <td <td <td </tr> </table> id="idc1"><img id="idc2"><img id="idc3"><img id="idc4"><img src="" src="" src="" src="" alt="" alt="" alt="" alt="" onclick="" onclick="" onclick="" onclick="" /></td> /></td> /></td> /></td> id="idc1"><img id="idc2"><img id="idc3"><img id="idc4"><img src="" src="" src="" src="" alt="" alt="" alt="" alt="" onclick="" onclick="" onclick="" onclick="" /></td> /></td> /></td> /></td> id="idc1"><img id="idc2"><img id="idc3"><img id="idc4"><img src="" src="" src="" src="" alt="" alt="" alt="" alt="" onclick="" onclick="" onclick="" onclick="" /></td> /></td> /></td> /></td> id="idc1"><img id="idc2"><img id="idc3"><img id="idc4"><img src="" src="" src="" src="" alt="" alt="" alt="" alt="" onclick="" onclick="" onclick="" onclick="" /></td> /></td> /></td> /></td>
How to generate the html bellow?

<table> <tr> <td <td <td <td </tr> <tr> <td <td <td <td </tr> <tr> <td <td <td <td </tr> <tr> <td <td <td <td </tr> </table> id="idc1_4"><img id="idc2_4"><img id="idc3_4"><img id="idc4_4"><img src="" src="" src="" src="" alt="" alt="" alt="" alt="" onclick="" onclick="" onclick="" onclick="" /></td> /></td> /></td> /></td> id="idc1_3"><img id="idc2_3"><img id="idc3_3"><img id="idc4_3"><img src="" src="" src="" src="" alt="" alt="" alt="" alt="" onclick="" onclick="" onclick="" onclick="" /></td> /></td> /></td> /></td> id="idc1_2"><img id="idc2_2"><img id="idc3_2"><img id="idc4_2"><img src="" src="" src="" src="" alt="" alt="" alt="" alt="" onclick="" onclick="" onclick="" onclick="" /></td> /></td> /></td> /></td> id="idc1_1"><img id="idc2_1"><img id="idc3_1"><img id="idc4_1"><img src="" src="" src="" src="" alt="" alt="" alt="" alt="" onclick="" onclick="" onclick="" onclick="" /></td> /></td> /></td> /></td>
Comment by project member serge....@gmail.com, May 3, 2010 ppaulojr, unique numbering is not possible yet. In your example, the abbreviation syntax is too ambiguous. Comment by dusho...@gmail.com, May 4, 2010 How to generate this html
<table class="box"> <tr id="item-1"> <td class="t"> <span></span> </td> <td> </td> </tr> <tr id="item-2"> <td class="t"> <span></span> </td> <td> </td> </tr> <tr id="item-3"> <td class="t"> <span></span> </td> <td>
6 de 19
07/09/2013 13:13
</td> </tr> </table>
thanks Comment by project member serge....@gmail.com, May 4, 2010 table.box>tr#item-$3>(td.t>span)+td Comment by mscien...@gmail.com, May 4, 2010 Is there a way to escape characters in the abbreviation. Say I have <div id="my.test.div"></div> I want to be able to write div#my\.test\.dev Comment by project member serge....@gmail.com, May 4, 2010 div[id=my.test.div] Comment by angelw...@gmail.com, May 4, 2010 @mscienski, having a period in the id attribute is invalid according to HTML specification. It can only contain letters, numbers, underscore, and maybe dash (or in regex [\w-]) and is required to start with a letter. Looks like serge's post got garbled above. It should have a between div and id, then a at the end. Comment by mscien...@gmail.com, May 5, 2010 @serge and @angelwatt Thanks for the replies. Yeah, I didn't think of just doing it div[id="mydiv.test.test"], but that works great. The reason I ask is because the backend I work with requires some keyword fields to have such a naming scheme. The company that publishes the software isn't concerned about W3C specs. It's not being released in the wild, just used internally in our company. Comment by tzako.l...@gmail.com, May 7, 2010 how do you create this html
<dl> <dt></dt> <dd></dd>  </dl>
I tried dl>(dt+dd)*5 and no lucky so far I wish there could be a zen code generator, you know like you write down the HTML and the generator returns what is the zen code for that cheers in advance Comment by franck.marcia@gmail.com, May 7, 2010 Create this snippet (not an abbreviation, it will not work): 'dtdd': '<dt></dt>\n<dd></dd>' then use: dl>dtdd*5 Comment by sserrano...@gmail.com, May 8, 2010 div#page>div.logo+ul#navigation>li*5>a Comment by xenon...@gmail.com, May 23, 2010 everythig is really cool! Respect to author! You're my hero =) But, i've tested it a little, and found this: div#id$2 -works fine #id$2 - not working, .id$2 - also this (div#id$2+p*2) - works fine (div#id$2+p*2)2 - not working so, i can't expand something usefull like this: form.auth>((label+input[type="text" val])2) can you fix these problems and add this feature, please?
7 de 19
07/09/2013 13:13
Comment by project member serge....@gmail.com, May 24, 2010 Yes, I'll try to fix this for the next release Comment by mkTUMS, May 26, 2010 @tzako.lakk I'll do it someday... Comment by ncsi...@gmail.com, May 26, 2010 I can't seem to get Coda working with the attributes feature. If I type a[target=blank] it should reproduce <a href="" target="blank"></a> but instead, it does nothing. Comment by project member serge....@gmail.com, May 27, 2010 ncsilva, it should work in this plugin: http://github.com/sergeche/tea-for-coda/downloads Comment by luis.gro...@gmail.com, Jun 8, 2010 @ncsilva It should be a[target=_blank] Comment by gqt...@sina.com, Jul 28, 2010 <li>a.class</li> why? <li><a href=""></a></li></li> Comment by project member serge....@gmail.com, Jul 28, 2010 In which editor? Comment by fmarco...@gmail.com, Jul 29, 2010 That is my example of the faster creation of HTML: html[xmlns=http://www.w3.org/1999/xhtml]>(head>meta[http-equiv=Content-Type content=text/html;charset=utf-8]+title+style[rel=stylesheet type=text/css media=screen])+body>div#content>(div#header+(div#nav>ul#menu>li*5)+div#page+div#footer) Ready to CSS? Comment by ian.c.ch...@gmail.com, Aug 12, 2010 I love the way this tool works. The brackets have been fitted into it perfectly. This was my first guess at how to build a table with a heading row and then 5 rows and 5 columns:
table>thead>tr>th*5+tbody>tr*5>td*5
This didn't quite work, but my second guess which was my first attempt at adding in brackets sorted this perfectly:
table>(thead>tr>th*5)+(tbody>tr*5>td*5)
I love it when my guesses work first time. So congrats to the author. Comment by horus...@gmail.com, Aug 13, 2010 , , "Expand abbreviation" espresso F1 ctrl, ( ). ! Comment by project member serge....@gmail.com, Aug 13, 2010 Mac OS' System Preferences> Keyboard > Keyboard Shortcuts > Application Shortcuts Comment by liquidri...@gmail.com, Sep 11, 2010 Eclipse Galileo OS X div#hello>div#world div#hello>a#world ?
8 de 19
07/09/2013 13:13
Comment by mblar...@gmail.com, Sep 28, 2010 @oncemade See the filters page, you can use |c at the end to add comments like you suggested. Comment by caoxie...@gmail.com, Nov 23, 2010 how can i output: <dt></dt> <dd></dd> <dt></dt> <dd></dd> <dt></dt> <dd></dd> Comment by project member serge....@gmail.com, Nov 23, 2010 dt+dd+dt+dd+dt+dd Comment by caoxie...@gmail.com, Nov 23, 2010 i hope (dt+dd)3 produce <dt></dt> <dd></dd> <dt></dt> <dd></dd> <dt></dt> <dd></dd>
Comment by project member serge....@gmail.com, Nov 23, 2010 this syntax will be available in the next version Comment by bluepres...@gastonia.com, Dec 4, 2010 This saves a lot of time, but one thing I'd like to see happen is this: div#wrapper creates the div with id wrapper as expected BUT ALSO creates #wrapper { } Is this already possible? Obviously, I'm going to style it, so why not save me the trouble by adding the definition in the style area or in another css page? Comment by project member serge....@gmail.com, Dec 5, 2010 It's not quite possible because ZC doesn't know where you want to put style definition (internal CSS, external CSS, which of LINK'ed or @IMPORT'ed external CSS), or maybe you're creating HTML snippet to use in CMS and don't need styling, or maybe you don't want styling but faster JS access to your wrapper element. Comment by bluepres...@gastonia.com, Dec 5, 2010 True. How about something like this? css+div#wrapper>div#header. Theoretically, that syntax would mean "at the end of the script output, append empty CSS for all classes and ids." I don't suggest that as actual syntax - 'CSS' could be whatever unique keyword at the start to tell the script engine to output the CSS. Honestly this script helps me fly, and I love it. I'm very good at visualizing my wireframe in code, and I can layout a complex site with this in 5 min, what would take me 25 manually typing every character. My biggest hurdle now is once it's finished, I have to ... open another window... flip back to remember my ids .. manually type out all the css definitions... flip back.. repeat the process. Even with code hinting, this is discouragingly slow. I would love to find a solution like this which allows me the option to output all related CSS selectors. Even if they are thrown at the bottom of the zen-coding script output, cutting and pasting would still be way faster. To get more complicated about it perhaps, if the 'css' prepended keyword is there, be able to style directly from the script? for example div#wrapper{margin: 0 auto;}>div#left{float:left;}+div#right{float:right} Again, I'm not suggesting syntax, but I think this would be a great benefit to this already existing time saving software. I'm not an expert programmer, but this would be valuable enough for me to help out on if I can. I haven't looked into the licensing. Let me know your thoughts. Thanks! Blue Comment by piema...@gmail.com, Dec 19, 2010 Really great tool, many thanks. Is there a way I can generate this?
<ul> <li id="item-1"><a id="link-1"></a></li> <li id="item-2"><a id="link-2"></a></li> <li id="item-3"><a id="link-3"></a></li> </ul>
9 de 19
07/09/2013 13:13
I tried ul>li#item-$*3>a#link-$ but it doesn't quite work as the numbering for the second $ starts from one again. Comment by biggsc...@gmail.com, Jan 25, 2011 I second the above comment. I was trying to achieve something like
<ul> <li id="item-1"><a href="link-1.html"></a></li> <li id="item-2"><a href="link-2.html"></a></li> <li id="item-3"><a href="link-3.html"></a></li> </ul>
using: ul>li#item-$3>a[href=item-$.html] The output is:

<ul> <li id="item-1"><a href="link-1.html"></a></li> <li id="item-2"><a href="link-1.html"></a></li> <li id="item-3"><a href="link-1.html"></a></li> </ul>
Is there some way to have a child node receive the same iteration value as its parent? Comment by project member serge....@gmail.com, Jan 25, 2011 It's not possible right now, I'll think about the solution Comment by project member serge....@gmail.com, Jan 25, 2011 OK, it was quick enough to fix so in upcoming v0.7 the item numbering will be context-aware Comment by liyunta...@gmail.com, Feb 23, 2011 I find ZC cannot work well with quicktext in notepad++.My god! I have to give up the quickText during editing the .html. Example: @dtd ---generate by quicktext--->> <html><body>$the cursor$</body></html> div.me --generate by ZC--->> div.me<b>$the cursor$</b> Why ? the bug?
Comment by kyrol....@gmail.com, Apr 8, 2011 i dont understand.. how to use zen.. Comment by dannilou...@gmail.com, Apr 14, 2011 alguien sabe como puedo poner una lista de reproduccion de MUSICUO en blogger? =/ Comment by line.l...@gmail.com, Apr 26, 2011 @ppaul...@gmail.com To get something like this :
<table> <tr> <td <td <td <td </tr> <tr> <td <td <td <td </tr> <tr> <td <td <td <td </tr> <tr> <td <td <td <td </tr> </table> id="idc1_4"><img id="idc2_4"><img id="idc3_4"><img id="idc4_4"><img src="" src="" src="" src="" alt="" alt="" alt="" alt="" onclick="" onclick="" onclick="" onclick="" /></td> /></td> /></td> /></td> id="idc1_3"><img id="idc2_3"><img id="idc3_3"><img id="idc4_3"><img src="" src="" src="" src="" alt="" alt="" alt="" alt="" onclick="" onclick="" onclick="" onclick="" /></td> /></td> /></td> /></td> id="idc1_2"><img id="idc2_2"><img id="idc3_2"><img id="idc4_2"><img src="" src="" src="" src="" alt="" alt="" alt="" alt="" onclick="" onclick="" onclick="" onclick="" /></td> /></td> /></td> /></td> id="idc1_1"><img id="idc2_1"><img id="idc3_1"><img id="idc4_1"><img src="" src="" src="" src="" alt="" alt="" alt="" alt="" onclick="" onclick="" onclick="" onclick="" /></td> /></td> /></td> /></td>
Just try to expand this :
10 de 19
07/09/2013 13:13
table>tr{td#idc\$_$*4>img[onclick]}*4
Comment by *alv...@codemyconcept.com, Apr 28, 2011 Hello I am a fan Is there a way I can generate this? div.text>p>some text maybe is really great if you can create something like that <div class="text"> <p>some text </p> </div> div.text>p>some text It`s only my think creazy Thanks Comment by michaelh...@gmail.com, May 2, 2011 you can do it like that: div.text>p>{some text} and you can even remove the "div" at the start as all classes and ids without a tagname are considered DIVs :) Comment by maciel...@gmail.com, May 9, 2011 html:5>div#geral>(div#menu>li*5>a#c$[onclick=javascript:menu('c$');])+(div#center>div#container-center>(div#center-left)+(div#center-right))+ (div#footer>(div#anim_footer)+(div#menu_footer)) Comment by *noe...@codemyconcept.com, May 23, 2011 Hi everyone, I have the next code for a div who going to repear three times: div.sidebar-navigation>ul>li*6>a But I can't find I way to say to the div.sidebar-navigation to repeat three times. Is there a way to the div, repeat three times?? Comment by bienveni...@gmail.com, May 26, 2011 div.sidebar-navigation*3>ul>li*6>a Comment by b.amir.s...@gmail.com, Jun 30, 2011 Man that's a really nice thing!!!!!!!!!!!!!!!!!!!! Comment by matteo_c...@fastwebnet.it, Jul 6, 2011 Great idea, except for the use of > as parent-child separator. While I understand it is a perfectly logical choice, consistent to CSS syntax, nevertheless it is hard to type on virtually any keyboard. (With "harD" I mean that it at least needs Shift on most keyboard layouts, and an additional Fn key on my small EeePC). Since this is the one symbol users will mostly use, alternatives like the unshifted , or \ or ' would be welcome. Maybe you can support both! Comment by judijem...@gmail.com, Jul 25, 2011 How i can do one for this: <ul> <li class="home"><a href=""></a><li> <li class="about"><a href=""></a><li> <li class="contact"><a href=""></a><li> </ul> For each LI to have a diferent CLASS name. like the example. Comment by luchopin...@gmail.com, Jul 25, 2011
11 de 19
07/09/2013 13:13
do this: ul>(li.home>a)+(li.about>a)+(li.contact>a) Comment by benetti....@gmail.com, Jul 29, 2011 Would anyone tell me if you can do this: div#teste>ul>li*3>a[href=#][title=%valueinbraces]{test1},{teste2},{teste3}<.p{test4},{test5},{test6}
<div id="teste"> <ul> <li><a href="#" title="test1">test1</a><p>test4</p></li> <li><a href="#" title="test2">test2</a><p>test5</p></li> <li><a href="#" title="test3">test3</a><p>test6</p></li> </ul> </div>
and this: div#teste>ul>li*3>a[href=#][title=%valueinbraces]{test1},{teste2},{teste3}<.<.<.p{test4}

<div id="teste"> <ul> <li><a href="#" title="test1">test1</a></li> <li><a href="#" title="test2">test2</a></li> <li><a href="#" title="test3">test3</a></li> </ul> <p>test4</p> </div>
Or if anyone has had this idea and are testing or implementing, as well as help facilitate that already fill in some gaps when we already have the content previously done. Comment by mdlee...@gmail.com, Aug 12, 2011 is something like the following possible? div.column>(div#Something + div#SomethingElse?)>h1+p to get <div class="column> <div id="Something"> <h1></h1> <p></p> </div> <div id="Somethingelse"> <h1></h1> <p></p> </div> </div> or do I just need to use the $ incrementing feature and find/replace? thanks :) Comment by scullytr, Aug 12, 2011 To get the above html, you could do something like this: div.column>(div#Something>h1+p)+(div#SomethingElse?>h1+p) Comment by luchopin...@gmail.com, Aug 12, 2011 you must put parenthesis like this: div.column>(div#Something>(h1+p))+(div#SomethingElse?>(h1+p)) Comment by brunoca...@gmail.com, Aug 15, 2011 I'm zorking on XML (and not HTML) and I got a problem with unary tags: Zen Coding does not detect it, and always put "binary" tags. Is there anything I can do? (I am using the eclipse plugin). Comment by project member serge....@gmail.com, Aug 16, 2011 You should define unary tags for XML syntax in y_zen_settings.js file. Read more on http://www.smashingmagazine.com/2009/11/21/zen-codinga-new-way-to-write-html-code/
12 de 19
07/09/2013 13:13
Comment by niko.hue...@googlemail.com, Aug 24, 2011 Has anyone else experienced the problem that Dreamweaver CS5 will not convert a statement such as (div.someClass>h1+h2)+(div.adjacentDiv>p) ? It's not even doing it wrong, but totally not converting it. Hope someone can help. Thanks, Niko Comment by blueh...@gmail.com, Aug 24, 2011 Do other replacements work? I had that issue when trying to use the TAB key as the expander. Comment by niko.hue...@googlemail.com, Aug 26, 2011 All tests were successful. Only the ones with the brackets won't. I've got the german Dreamweaver CS5 and I'm using CTRK++ to expand, set by my own in the preferences. Comment by niko.hue...@googlemail.com, Aug 26, 2011 Oh, and thanks for your help! Comment by cam...@gmail.com, Sep 7, 2011 Hello, is there a way to turn this: LOREM IPSUM DOLOR into this: <a href="" title="go to LOREM">LOREM</a> <a href="" title="go to IPSUM">IPSUM</a> <a href="" title="go to DOLOR">DOLOR</a> Thanks, Xesc Comment by blueh...@gmail.com, Sep 7, 2011 @niko: Maybe it's the German client? It works fine in mine, but I use a different keybind. Try changing the key you use to expand and see if that makes a difference, maybe it's a conflict? Hmm... @cam: Yes. a[title="go to LOREM"]{LOREM}+a[title="go to IPSUM"]{IPSUM}+a[title="go to DOLOR"]{DOLOR} Comment by blueh...@gmail.com, Sep 7, 2011 @niko: ctrl++ (which is really ctrl+= to the computer) is set for zoom in on CSS by default. Did you have problems before or did it suddenly stop working with only this code? Comment by luchopin...@gmail.com, Sep 7, 2011 select each text, then press CTRL+W, then type this zen code: a[title=go to ...] Comment by blueh...@gmail.com, Sep 7, 2011 If you don't enclose the title value with quotation marks, you'll get this: <a href="" title="go" to="" blah=""></a> Also, ctrl+w is close window unless you've remapped your keybindings. Comment by luchopin...@gmail.com, Sep 7, 2011 oohh, you right!!! then, the code must be: select each text, then press CTRL+W, then type this zen code: a[title='go to ...'] (with quotes) Comment by cam...@gmail.com, Sep 8, 2011 Hi again, thanks for the replies. When I wrote the question had a problem with formatting the text. It was assumed that LOREM IPSUM DOLOR were in a list format. The real question is: I can use the selected text to repeat in an expanded label? that is: selecting LOREM and using a specific code to refer to it and repeat it. Example: select LOREM -> write code to Zen = 'go to ****'? ( refers to the selected text) -> result <a href = "" title = "go to LOREM "> LOREM </ a> I use Pspad and CTRL+W only close my document, what is supposed to do? Thanks. Comment by not...@gmail.com, Sep 8, 2011
13 de 19
07/09/2013 13:13
This should get most of way. Select and choose "Wrap with Abreviation" a[title="go to"] I'm not sure how to reference the items to include them in the expansion or if it's even possible. hope this helps, bruce Comment by project member serge....@gmail.com, Sep 8, 2011 In v0.7, you can explicitly point where to output wrapped data: https://github.com/sergeche/zen-coding/wiki/Release-Notes In your example, abbreviation will look like this: a[title='go to $#']{$#} Comment by cam...@gmail.com, Sep 9, 2011 Hi Serge, this is exactly what I was looking for. A zillion thanks for your answer, ;) Seriously, thank you very much. Comment by christop...@gmail.com, Sep 26, 2011 Heyo. Thanks for a fantastic tool! I found something that probably straddles the line between bug and feature, though. Consider these: 1: h4#ch$$*3 The $$ increments as 01, 02, 03 (fine) 2: (h4#ch$$)*3 The $$ stays on 01 for all 3 copies (not what I expected) 3: (h4#ch$$*3)*3 The $$ here goes from 01 to 03 three times. I can see where this behaviour would be handy. But I'm trying to use something like this:
(h4#ch$$+p)*3
and since the multiplier won't affect the $$, I have to drop the p and brackets, then use a find/replace to add the p tags. Not a huge deal, but thought I'd point it out. Comment by yngve.ni...@gmail.com, Sep 29, 2011 A similar add-in is available for Visual Studio 2010 also: http://yngvenilsen.wordpress.com/2011/09/28/zencoding-visual-studio-add-in/ :) Comment by adwo...@vannana.com, Oct 8, 2011 OK, I feel so stupid I didn't know about the existence of this until today Comment by Amit.Yad...@gmail.com, Dec 6, 2011 p*3 Comment by kai.chan...@artfinder.com, Dec 9, 2011 It's frustrating that expand abbreviation on img - at the moment it unravels to <img /> - but should for the html5 spec be fixed to <img> I've been using expand abbr for a while and been looking at the expand_abbreviation.py file in ~/Library/Application Support/TextMate?/Pristine Copy/Bundles/Zen Coding.tmbundle/Support Has anyone fixed this or know of how to fix it? I may look at it this weekend to see if I can figure it :) Thanks for reading! Comment by javo.gr...@gmail.com, Dec 14, 2011 It would be great if in new versions to come you were able to output multiple attributes with the values stored in a array of names eg.
a[href=home,about,news,blog.html]*4
14 de 19
07/09/2013 13:13
would result in
<a <a <a <a href="home.html"></a> href="about.html"></a> href="news.html"></a> href="blog.html"></a>
not sure if this would be possible but i would make menu building and many other things a breeze! Comment by leopards...@gmail.com, Feb 10, 2012 try it. May good luck. Comment by not...@gmail.com, Feb 11, 2012 This works for me, wrap: home about news blog with this: a[href=/$#]{$#}
Comment by not...@gmail.com, Feb 11, 2012 sorry, link targets on their own line of course Comment by zhengzon...@gmail.com, Mar 5, 2012 cool!!!! Comment by icssjs, Apr 10, 2012 how select>option#item-$ index for 3 ` <select> <option id="item-1"></option> <option id="item-2"></option> <option id="item-3"></option> </select>` Comment by icssjs, Apr 10, 2012
<select> <option id="item-3"></option> <option id="item-4"></option> <option id="item-5"></option> </select> select>option#item-$ index for 3
Comment by filiceal...@gmail.com, May 2, 2012 Is there any way to generate something like this:
<table> <tr> <td <td <td <td <td </tr> <tr> <td <td <td <td <td </tr> </tr>
id="box1"></td> id="box2"></td> id="box3"></td> id="box4"></td> id="box5"></td> id="box6"></td> id="box7"></td> id="box8"></td> id="box9"></td> id="box10"></td>
Also is there any way to start the count at a specific number? Say 0 instead of 1? Comment by imtibalo...@gmail.com, May 12, 2012 table>(tr>td#box-$3)+(tr>td#box-$3)
15 de 19
07/09/2013 13:13
Comment by krzemins...@gmail.com, May 14, 2012 Hi there Is there a chance to make something like this abcd <select name=""> <option value="a">a</option> <option value="b">ba</option> <option value="c">c</option> <option value="d">d</option> </select> I used warp with abbriviation but and use select>optionvalue?, but I get only <select name=""> <option value="">a</option> <option value="">ba</option> <option value="">c</option> <option value="">d</option> </select> so there are empty values. Thanks in advance for your help. Comment by stadja@gmail.com, Jun 14, 2012 Answer to krzemins...@gmail.com, May 14, 2012 : Around
a b c d
you just use

select>div[value=$#]{$#}*
Comment by woll...@gmail.com, Jun 15, 2012 Awesome Plugin!!!! Comment by kthx...@gmail.com, Jun 21, 2012 I don't know if this is official syntax, but in SublimeText? you can use E{Content} to generate <element>Content</element>. Comment by kennethj...@gmail.com, Jul 9, 2012 How do we get the whole html that includes the doctype, meta tag, title tag in the head tags as well as a body tag. When i type html+tab i get just <html></html> Comment by lioneles...@hotmail.com, Aug 3, 2012 markreidyhp, yes, is: html>head>title{Test Page} Comment by mta...@gmail.com, Aug 21, 2012 Around a b c d e f g h i j ???? <table> <tr> <td>a</td> <td>b</td> </tr> <tr> <td>c</td> <td>d</td> </tr> <tr> <td>e</td> <td>f</td> </tr> <tr> <td>g</td> <td>h</td>
16 de 19
07/09/2013 13:13
</tr> <tr> <td>i</td> <td>j</td> </tr> </table> Wrap With Abb... How Can do this??? Comment by wjbla...@gmail.com, Sep 13, 2012 Is it possible to auto-close a tag? for example, I'm writing an xml, and I'd like to create tags like this: <element att="somevalue" /> Comment by landismo@gmail.com, Oct 6, 2012 Hi all, Is there any way to make a definition List by "wrappin with Abbreviatures" one terms list? For example: my therm list.
term1 term2 term3
outputs:
<dl> <dt>term1</dt> <dd></dd> <dt>term2</dt> <dd></dd> <dt>term3</dt> <dd></dd> </dl>
Im stuck into this question! Comment by www.w3ha...@gmail.com, Oct 16, 2012 bbs.w3hacker.com nodejs Comment by bioinfin...@gmail.com, Oct 17, 2012 To Mark Reid: html>head>title{Test Page} That produces your requested output <html> <head> <title>Test Page</title> </head> </html> Comment by bioinfin...@gmail.com, Oct 17, 2012 filiceal, the code should be: table>(tr>td#box$3)2 Comment by wekplaat...@gmail.com, Oct 18, 2012 What about using this for php, you can't seem to be able to use the dollar sign since it'll make it into a '1'. In Zen Coding.js I tried this 'query': '$query = mysql_query("SELECT FROM posts") or die(mysql_error());', Anyone?
17 de 19
07/09/2013 13:13
Comment by danielma...@gmail.com, Nov 6, 2012 I learned this from Jeffrey way in youtube, i screamed after installing a package in my sublime text editor and start coding with speed. thanks all team behind zen coding for ths awesome innovation! Comment by pala.pa...@gmail.com, Nov 8, 2012 Thank you very much for such a mind blowing plugin...Keep it up! Comment by oukdke...@gmail.com, Dec 25, 2012 Adding to image simply type img it shows <img src="" alt=""> but inside that you can type w for width="" h for height="" st for style="" press Tab key two times if u use Sublime text for st. Comment by ravianex...@gmail.com, Dec 28, 2012 Thanks its amazing, now we can do fast coding. Comment by bharat20...@gmail.com, Jan 23, 2013 Can anyone help me out for building zen code for below: <html> <head> <link rel="stylesheet" href="" /> </head> <body> <div class="wrapper"> <div class="header"> <div class="logo"></div> <div class="slogan"></div> </div> <div class="maincontent"> <div class="leftbar"></div> <div class="rightbar"></div> </div> <div class="clearfix" /> <div class="footer"></div> </div> </body> </html> Comment by alexissi...@gmail.com, Jan 27, 2013 Hey man, You can use this for building your html page basic. html>(head>title+link[rel="stylesheet" href=""])+(body>(div.wrapper>div.header>div.logo+div.slogan)+(div.maincontent>div.leftbar+div.rightbar)+ (div.clearfix+div.footer)) Try and enjoy it! Comment by gardnerj...@gmail.com, Mar 13, 2013 ... why am I only learning of the existence of Zen Coding now... Comment by Cedric.C...@gmail.com, Mar 14, 2013 Hello, I wonder if we can associate an ID and a class in an example : <ul id="selected-plays" class="clear-after"> </ul> etc .... Comment by Cedric.C...@gmail.com, Mar 14, 2013
18 de 19
07/09/2013 13:13
I find here is the solution ul#selected-plays[class=clear-after] Comment by xie.tian...@gmail.com, Mar 16, 2013 powerfull tool Comment by shah.nik...@gmail.com, Apr 17, 2013 How to create the xml code for any event like start, stop, modify at a any time automatically?? not manually. plz reply me . thnk you. Comment by mianaami...@gmail.com, Jun 9, 2013 Zen Coding is Awsm... Comment by satyaka...@gmail.com, Jul 18, 2013 I need to add element at 3 level up the order. How to do that?
Sign in to add a comment
Terms - Privacy - Project Hosting Help Powered by Google Project Hosting
19 de 19
07/09/2013 13:13

ZenHTMLSelectorsEn - Zen-Coding - Selectors and Aliases For Zen HTML Plugins - Set of Plugins For HTML and CSS Hi-Speed Coding

Caricato da

Informazioni sul documento

Descrizione originale:

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

ZenHTMLSelectorsEn - Zen-Coding - Selectors and Aliases For Zen HTML Plugins - Set of Plugins For HTML and CSS Hi-Speed Coding

Caricato da

Copyright:

Formati disponibili

ZenHTMLSelectorsEn - zen-coding - Selectors and aliases for Zen HT...