CSS chained sibling selectors?

Question

Given the html:

  <div class="apples">
    <div class="apple"></div>
    <div class="apple"></div><br>
  </div>
  <div class="oranges">
    <div class="apple"></div>
    <div class="apple"></div>
  </div>

.. I'd like to have the margin between two .apple s in the .apples div to be 15px but for there to be no margin between the apples in the oranges div.

I could do:

.apple + .apple{
    margin-left:15px;
}

..but that add the margin to the .apple s in .oranges as well.

I would like to be able to do something like:

.apples > .apple + .apples > .apple{
  margin-left:15px;
}

..but, not surprisingly, that didn't work.

to fiddle with: http://jsbin.com/ijagoc/1/edit

Answer 1

.apples > .apple + .apple {
    margin-left: 15px;
}

or you could do a first child selector to also support more than one inner div:

.apples .apple {
    margin-left: 15px;
.apples .apple:first-child {
    margin-left: 0;
}