Ember handlebars and adjacent CSS selector

Question

Ember Handlebars is messing with adjacent sibling CSS selectors (el + el)

For example, I have list of items:

{{#each item in items}}                    
  <span class="item">{{item}}</span>
{{/each}}

And I want to add spacing between them with this rule:

.item + .item {
  margin-left: 1em;
} 

But it doesn't work, because Ember is inserting Metamorph placeholders between items (tags like <script id="metamorph-1-end" type="text/x-placeholder"></script>)

What should I use instead of adjacent sibling selector with handlebars?

Answer 1

Use general sibling (or next sibling) selector (el ~ el).

Like this:

.item ~ .item {
  margin-left: 1em;
} 

It will 'skip' Metamorph placeholder tags and any other tags between items.