ZenHTMLSelectorsEn - Zen-coding - Selectors and Aliases for Zen HTML Plugins - Set of Plugins for HTML and CSS Hi-speed Coding

7/27/2019 ZenHTMLSelectorsEn - Zen-coding - Selectors and Aliases for Zen HTML Plugins - Set of Plugins for HTML and CSS

1/19

Project Home Downloads Wiki Issues Source

Updated Feb 17, 2010 by [email protected]

My favorites | Sign in

zen-codingSet of plugins for HTML and CSS hi-speed coding Search projects

Search for Search

ZenHTMLSelectorsEn Selectors and aliases for Zen HTML plugins

Zen HTML Selectors

E#name

div#name

E.name

div.name

div.one.two

div#name.one.two

E>E

head>link

table>tr>td

ul#name>li.item

E+E

p+p

div#name>p.one+p.two

E[attr]

HTMLSelectorsEn - zen-coding - Selectors and aliases for Zen HT... http://code.google.com/p/zen-coding/wiki/ZenHTMLSelectorsEn

19 07/09/2013 13:13


2/19

Added in v0.6

p[title]

td[colspan=2]

span[title="Hello" rel]

E|filter

Added in v0.6

p.title|e

&lt ; p class ="title" &gt ;& lt ;/ p&gt ;

Read Filters for more info

E*N

p*3

ul#name>li.item*3

E*N$

p.name-$*3

select>option#item-$*3

E+

ul+

table+

dl+


19 07/09/2013 13:13


3/19

Comment by [email protected] , 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 [email protected] , Aug 27, 2009

ul+

Comment by [email protected] , 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:

Comment by piwerek , Sep 28, 2009

div.par$*2>p*3

Comment by project member [email protected] , Sep 28, 2009

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

Comment by [email protected], Sep 28, 2009

html:xs

Comment by [email protected] , 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 [email protected] , 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 muchfaster 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

Comment by [email protected] , Nov 21, 2009

@oncemade


19 07/09/2013 13:13


4/19

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"


5/19

Any chance of including the ability to include multiple copies of the original text for the Wrap with Abbreviation action? It appears that something likethis used in the comment filter already)

Example output:

foo

Comment by project member [email protected] , Feb 19, 2010

It might be possible with custom snippets and new variable like ${selection} Snippet may look like this:

'my-lia' : '${selection}'

Or as a new filter. But it definitely won't be a default behavior.

Comment by [email protected] , 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

You can express this as: (div.someClass>h1+h2)+(div.adjacentDiv>p)

Comment by [email protected] , Apr 7, 2010

tr>td.item-{left,right}

may?


Is there someway to say what should be inside the tags? For example

html >head >title ( Test Page )

would produce

Test Page

How would (If i can)i do that

Comment by project member [email protected] , 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 [email protected] , May 1, 2010

Ok, Thanks.


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


19 07/09/2013 13:13


6/19

Generates:

How to generate the html bellow?


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


How to generate this html


19 07/09/2013 13:13


7/19

thanks


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


Is there a way to escape characters in the abbreviation.

Say I have

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, andmaybe dash (or in regex [\w-]) and is required to star t 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 thebackend I work with requires some keyword fields to have such a naming scheme. The company that publishes the software isn't concerned aboutW3C specs. It's not being released in the wild, just used internally in our company.


how do you create this html

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': '\n' 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?


19 07/09/2013 13:13


8/19


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

Comment by mkTUMS , May 26, 2010

@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 but instead, it does nothing.


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

Comment by [email protected] , Jun 8, 2010

@ncsilva

It should be a[target=_blank]

Comment by [email protected], Jul 28, 2010

a.class why?

Comment by project member [email protected] , Jul 28, 2010

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=stylesheettype=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 andthen 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 f irst 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, ( ). !

Comment by project member [email protected] , Aug 13, 2010

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


Eclipse Galileo OS X div#hello>div#world div#hello>a#world ?


19 07/09/2013 13:13


9/19


@oncemade

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


how can i output:

Comment by project member [email protected] , Nov 23, 2010

dt+dd+dt+dd+dt+dd


i hope (dt+dd) 3 produce

Comment by project member [email protected] , Nov 23, 2010

this syntax will be available in the next version

Comment by [email protected], 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 csspage?

Comment by project member [email protected] , 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 butfaster 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, appendempty 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 cssdefinitions... 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 thezen-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 expertprogrammer, 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 [email protected] , Dec 19, 2010

Really great tool, many thanks.

Is there a way I can generate this?


19 07/09/2013 13:13


10/19

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 [email protected] , Jan 25, 2011

I second the above comment. I was trying to achieve something like

using: ul>li#item-$3>a[href=item-$.html] The output is:

Is there some way to have a child node receive the same iteration value as its parent?

Comment by project member [email protected] , Jan 25, 2011

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

Comment by project member [email protected] , Jan 25, 2011

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

Comment by [email protected] , 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 ---generateby quicktext--->> $the cursor$ div.me --generate by ZC--->> div.me$the cursor$ Why ? the bug?


i dont understand.. how to use zen..

Comment by [email protected], Apr 14, 2011

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


@[email protected]

To get something like this :

Just try to expand this :


e 19 07/09/2013 13:13


11/19

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

Comment by *[email protected], Apr 28, 2011

Hello

I am a fan

Is there a way I can generate this?

div.text>p>some textmaybe is really great if you can create something like that

some text

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

Comment by *[email protected], 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 t here 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 additionalFn key on my small EeePC). Since this is the one symbol users will mostly use, alternatives like the unshifted , or \ or ' would be welcome. Maybeyou can support both!


How i can do one for this:

For each LI to have a diferent CLASS name. like the example.



e 19 07/09/2013 13:13


12/19

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}ul>li*3>a[href=#][title=%valueinbraces]{test1},{teste2},{teste3}


13/19


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 bymy own in the preferences.


Oh, and thanks for your help!


Hello, is there a way to turn this: LOREM IPSUM DOLOR

into this: LOREM IPSUM DOLOR

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 thatmakes a difference, maybe it's a conflict? Hmm...

@cam: Yes. a[tit le="go to LOREM"]{LOREM}+a[t itle="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 stopworking 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: Also, ctrl+w is close window unlessyou'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 DOLORwere 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 specificcode to refer to it and repeat it. Example: select LOREM -> write code to Zen = 'go to ****' ? ( refers to the selected text) -> result LOREM

I use Pspad and CTRL+W only close my document, what is supposed to do?Thanks.



e 19 07/09/2013 13:13


14/19

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 themin the expansion or if it's even possible.

hope this helps, bruce

Comment by project member [email protected] , 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 $#']{$#}


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 thoughtI'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/

:)

Comment by [email protected], Oct 8, 2011

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 - but should for the html5 spec be fixed to

I've been using expand abbr for a while and been looking at the expand_abbreviation.py file in ~/Library/Application Support/TextMate ? /PristineCopy/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


e 19 07/09/2013 13:13


15/19

would result in

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


cool!!!!

Comment by icssjs , Apr 10, 2012

how select>option#item-$ index for 3 `

`

Comment by icssjs , Apr 10, 2012

select>option#item-$ index for 3


Is there any way to generate something like this:

Also is there any way to start the count at a specific number? Say 0 instead of 1?


table>(tr>td#box-$ 3)+(tr>td#box-$ 3)


e 19 07/09/2013 13:13


16/19


Hi there

Is there a chance to make something like this

a b c d

a ba c d

I used warp with abbriviation but and use select>optionvalue ?, but I get only a ba c d

so there are empty values.

Thanks in advance for your help.


Answer to [email protected], May 14, 2012 :

Around

abc

d

you just use

select >div [ value =$ #]{$#}*

Comment by [email protected], Jun 15, 2012

Awesome Plugin!!!!


I don't know if this is official syntax, but in SublimeText ? you can use E{Content} to generate Content.


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


markreidyhp, yes, is: html>head>title{Test Page}

Comment by [email protected], Aug 21, 2012

Arounda b c d e f g h i j ????

a b

c d

e f

g h


e 19 07/09/2013 13:13


17/19

i j

Wrap With Abb... How Can do this???


Is it possible to auto-close a tag? for example, I'm writing an xml, and I'd like to create tags like this:


Hi all,

Is there any way to make a definition List by "wrappin with Abbreviatures" one terms list?

For example:

my therm list.

term1

term2term3

outputs:

term1 term2 term3

Im stuck into this question!


bbs.w3hacker.com nodejs


To Mark Reid:

html>head>title{Test Page}

That produces your requested output

Test Page


filiceal, the code should be:

table>(tr>td#box$ 3)2


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?


e 19 07/09/2013 13:13


18/19

Comment by [email protected], 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 allteam behind zen coding for ths awesome innovation!

Comment by [email protected], Nov 8, 2012

Thank you very much for such a mind blowing plugin...Keep it up!


Adding to image simply type img it shows but inside that you can type w for width="" h for height="" st for style="" press Tab keytwo times if u use Sublime text for st.


Thanks its amazing, now we can do fast coding.


Can anyone help me out for building zen code for below:


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!


... why am I only learning of the existence of Zen Coding now...


Hello, I wonder if we can associate an ID and a class in an example :

etc .. ..



e 19 07/09/2013 13:13


19/19

I find here is the solution ul#selected-plays[class=clear-after]


powerfull tool


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.


Zen Coding is Awsm...


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


Documents

ZenHTMLSelectorsEn - Zen-coding - Selectors and Aliases for Zen HTML Plugins - Set of Plugins for HTML and CSS Hi-speed Coding