zen coding multiple elements with children

Question

I am trying out zen coding and cannot seem to replicate some HTML code I have laying around.

Here's the code:

<div class="home-page container clearfix news-article">
    <div class="box-round">
        <div class="cn tl"></div>
        <div class="cn tr"></div>
        <div class="br-title"><span></span></div>
        <div class="br-content pad15 clearfix">
            <cfoutput>#event.getView("data")#</cfoutput>
        </div>
    </div>

</div>

Here is what I have so far:

div.home-page.container.clearfix.news-article > div.box-round > div.cn.tl + div.cn.tr + div.br-title > span

And I guess where I am stuck in is expanding multiple items each of which has a child element.

Specifically: my <div class="br-title"> has a child element which is an empty <span></span> (added to see if I can replicate in zen) but it also has a "sibling" element <div class="br-content pad15 clearfix"> which itself has a child element.

Any advice will be much appreciated. I did look up examples, and tried myself to resolve with no success, so I am curious how this can be done

Answer 1

There are a few ways to do this, you can parenthesize elements with child selectors or use the parent operator (^):

1. Parens ()

A nice way to avoid breaking the "flow" of you zen coding snippet. See this SO post.

(div.br-title > span) + (div.br-content > cfoutput)

Complete Snippet:

div.home-page.container.clearfix.news-article > div.box-round > div.cn.tl + div.cn.tr + (div.br-title > span) + (div.br-content > cfoutput)

2. Parent Operator ^

Another option, as Sergey (he's the creator of Emmet, so you can probably trust him ;) ) pointed out in the comments.

.br-title>span^.br-content>cfoutput

Complete Snippet:

.home-page.container.clearfix.news-article>.box-round>.cn.tl+.cn.tr+.br-title>span^.br-content>cfoutput

An additional note

There's no need to include div before your .class names, you can just use .classname and Emmet will include a div (you do need to specify for other elements). A more concise Zen Coding snippet would be:

.home-page.container.clearfix.news-article>.box-round>.cn.tl+.cn.tr+(.br-title>span)+(.br-content>cfoutput)