Zen HTML Selectors

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 ...

ul+

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>

<p></p> <p></p> <p></p>

div.par$*2>p*3

Online demo of Zen Coding is available here: http://zen-coding.ru/demo/

html:xs

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

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.

Cool that's fine, just wanted to make sure I wasn't missing an obvious feature. Cheers!

Is it possible to automatic add close comment to the end of the element? See example:

div.item

would output <div class="item"></div><!-- /.item -->

@oncemade

That's exactly the markup I use :D . I am actually looking for this function as well! tnx

Хотелось бы еще скобки чтобы писать: form.auth>(label+input:text)*2

а чтото в етом роде можно?

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> ...

Так нельзя и будущем такой синтаксис точно не появится

@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]

Very useful - think the ability to do custom snippets will be useful, going to write a set for working in C# .NET

PHPZen inspired by Zen coding. PHPZen generates HTML blocks like Zen-Coding:

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

Would love to be able to do attributes. Really like shoebappa's ideas.

Attributes are available in some latest plugins releases: http://code.google.com/p/zen-coding/source/detail?r=254

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

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>

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.

@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)

tr>td.item-{left,right}

<tr>
   <td class="item-left"></td>
   <td class="item-right"></td>
</tr>

may?

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

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"

Ok, Thanks.

table>tr*4>td#idc$*4>img[onclick]

Generates:

<table>
	<tr>
		<td id="idc1"><img src="" alt="" onclick="" /></td>
		<td id="idc2"><img src="" alt="" onclick="" /></td>
		<td id="idc3"><img src="" alt="" onclick="" /></td>
		<td id="idc4"><img src="" alt="" onclick="" /></td>
	</tr>
	<tr>
		<td id="idc1"><img src="" alt="" onclick="" /></td>
		<td id="idc2"><img src="" alt="" onclick="" /></td>
		<td id="idc3"><img src="" alt="" onclick="" /></td>
		<td id="idc4"><img src="" alt="" onclick="" /></td>
	</tr>
	<tr>
		<td id="idc1"><img src="" alt="" onclick="" /></td>
		<td id="idc2"><img src="" alt="" onclick="" /></td>
		<td id="idc3"><img src="" alt="" onclick="" /></td>
		<td id="idc4"><img src="" alt="" onclick="" /></td>
	</tr>
	<tr>
		<td id="idc1"><img src="" alt="" onclick="" /></td>
		<td id="idc2"><img src="" alt="" onclick="" /></td>
		<td id="idc3"><img src="" alt="" onclick="" /></td>
		<td id="idc4"><img src="" alt="" onclick="" /></td>
	</tr>
</table>

How to generate the html bellow?

<table>
	<tr>
		<td id="idc1_1"><img src="" alt="" onclick="" /></td>
		<td id="idc2_1"><img src="" alt="" onclick="" /></td>
		<td id="idc3_1"><img src="" alt="" onclick="" /></td>
		<td id="idc4_1"><img src="" alt="" onclick="" /></td>
	</tr>
	<tr>
		<td id="idc1_2"><img src="" alt="" onclick="" /></td>
		<td id="idc2_2"><img src="" alt="" onclick="" /></td>
		<td id="idc3_2"><img src="" alt="" onclick="" /></td>
		<td id="idc4_2"><img src="" alt="" onclick="" /></td>
	</tr>
	<tr>
		<td id="idc1_3"><img src="" alt="" onclick="" /></td>
		<td id="idc2_3"><img src="" alt="" onclick="" /></td>
		<td id="idc3_3"><img src="" alt="" onclick="" /></td>
		<td id="idc4_3"><img src="" alt="" onclick="" /></td>
	</tr>
	<tr>
		<td id="idc1_4"><img src="" alt="" onclick="" /></td>
		<td id="idc2_4"><img src="" alt="" onclick="" /></td>
		<td id="idc3_4"><img src="" alt="" onclick="" /></td>
		<td id="idc4_4"><img src="" alt="" onclick="" /></td>
	</tr>
</table>

ppaulojr, unique numbering is not possible yet. In your example, the abbreviation syntax is too ambiguous.

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>
			
		</td>
	</tr>
</table>

thanks

table.box>tr#item-$3>(td.t>span)+td

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

div[id=my.test.div]

@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.

@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.

how do you create this html

<dl>
 <dt></dt>
 <dd></dd> <!-- where dt and dd pair can be N quantity of elements -->
</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

Create this snippet (not an abbreviation, it will not work): 'dtdd': '<dt></dt>\n<dd></dd>' then use: dl>dtdd*5

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

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?

Yes, I'll try to fix this for the next release

@tzako.lakk I'll do it someday...

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.

ncsilva, it should work in this plugin: http://github.com/sergeche/tea-for-coda/downloads

@ncsilva

It should be a[target=_blank]

<li>a.class</li> why? <li><a href=""></a></li></li>

In which editor?

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?

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.

Подскажите, пожалуйста, как поменять быструю клавишу "Expand abbreviation" в espresso с F1 на ctrl, (как было в прошлых релизах). Спасибо!

Mac OS' System Preferences> Keyboard > Keyboard Shortcuts > Application Shortcuts

Может ли кто опредилить почему в Eclipse Galileo на OS X это div#hello>div#world не работает а div#hello>a#world работает и как бы починить?

@oncemade

See the filters page, you can use |c at the end to add comments like you suggested.

how can i output:

<dt></dt> <dd></dd> <dt></dt> <dd></dd> <dt></dt> <dd></dd>

dt+dd+dt+dd+dt+dd

i hope (dt+dd)3 produce <dt></dt> <dd></dd> <dt></dt> <dd></dd> <dt></dt> <dd></dd>

this syntax will be available in the next version

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?

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.

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

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>

I tried ul>li#item-$*3>a#link-$ but it doesn't quite work as the numbering for the second $ starts from one again.

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?

It's not possible right now, I'll think about the solution

OK, it was quick enough to fix so in upcoming v0.7 the item numbering will be context-aware

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?

i dont understand.. how to use zen..

alguien sabe como puedo poner una lista de reproduccion de MUSICUO en blogger? =/

@ppaul...@gmail.com

To get something like this :

<table>
        <tr>
                <td id="idc1_1"><img src="" alt="" onclick="" /></td>
                <td id="idc2_1"><img src="" alt="" onclick="" /></td>
                <td id="idc3_1"><img src="" alt="" onclick="" /></td>
                <td id="idc4_1"><img src="" alt="" onclick="" /></td>
        </tr>
        <tr>
                <td id="idc1_2"><img src="" alt="" onclick="" /></td>
                <td id="idc2_2"><img src="" alt="" onclick="" /></td>
                <td id="idc3_2"><img src="" alt="" onclick="" /></td>
                <td id="idc4_2"><img src="" alt="" onclick="" /></td>
        </tr>
        <tr>
                <td id="idc1_3"><img src="" alt="" onclick="" /></td>
                <td id="idc2_3"><img src="" alt="" onclick="" /></td>
                <td id="idc3_3"><img src="" alt="" onclick="" /></td>
                <td id="idc4_3"><img src="" alt="" onclick="" /></td>
        </tr>
        <tr>
                <td id="idc1_4"><img src="" alt="" onclick="" /></td>
                <td id="idc2_4"><img src="" alt="" onclick="" /></td>
                <td id="idc3_4"><img src="" alt="" onclick="" /></td>
                <td id="idc4_4"><img src="" alt="" onclick="" /></td>
        </tr>
</table>

Just try to expand this :

table>tr{td#idc\$_$*4>img[onclick]}*4

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

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 :)

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))

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??

div.sidebar-navigation*3>ul>li*6>a

Man that's a really nice thing!!!!!!!!!!!!!!!!!!!!

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!

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.

do this: ul>(li.home>a)+(li.about>a)+(li.contact>a)

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.

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>

or do I just need to use the $ incrementing feature and find/replace?

thanks :)

To get the above html, you could do something like this:

div.column>(div#Something>h1+p)+(div#SomethingElse?>h1+p)

you must put parenthesis like this: div.column>(div#Something>(h1+p))+(div#SomethingElse?>(h1+p))

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).

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-coding-a-new-way-to-write-html-code/

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

Do other replacements work? I had that issue when trying to use the TAB key as the expander.

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.

Oh, and thanks for your help!

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

@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}

@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?

select each text, then press CTRL+W, then type this zen code: a[title=go to ...]

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.

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)

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.

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

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 $#']{$#}

Hi Serge, this is exactly what I was looking for.

A zillion thanks for your answer, ;·)

Seriously, thank you very much.

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.

A similar add-in is available for Visual Studio 2010 also:

http://yngvenilsen.wordpress.com/2011/09/28/zencoding-visual-studio-add-in/

:)

OK, I feel so stupid I didn't know about the existence of this until today

p*3

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!

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

would result in

<a href="home.html"></a>
<a href="about.html"></a>
<a href="news.html"></a>
<a href="blog.html"></a>

not sure if this would be possible but i would make menu building and many other things a breeze!

try it. May good luck.

This works for me, wrap:

home about news blog

with this: a[href=/$#]{$#}

sorry, link targets on their own line of course