CSS прикованный селектор?

Question

Учитывая 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> 

.. Я хотел бы иметь запас между двумя .apple с в .apples DIV быть 15px но там нет никакого Маржа между яблоками в апельсинах дел.

я мог бы сделать:

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

..но что добавить маржу к .apple с в .oranges, а также.

Я хотел бы быть в состоянии сделать что-то вроде:

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

..но, не удивительно, что не работает.

поиграться с: http://jsbin.com/ijagoc/1/edit

Answer 1

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

или вы могли бы сделать первый селектор ребенка также поддерживает более чем один внутренний ДИВ:

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