html - CSS chained sibling selectors? -

html - CSS chained sibling selectors? -

given 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 have margin between 2 .apples in .apples div 15px there no margin between apples in oranges div.

i do:

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

..but add together margin .apples in .oranges well.

i able like:

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

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

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

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

or first kid selector back upwards more 1 inner div:

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

html css