Common double border with nested elements

HTML

<div class="item item-selected"><div class="item-inner">item</div></div>
<div class="item"><div class="item-inner">item</div></div>
<div class="item item-selected"><div class="item-inner">item</div></div>
<div class="item"><div class="item-inner">item</div></div>
<div class="item item-selected"><div class="item-inner">item</div></div>
<div class="item item-selected"><div class="item-inner">item</div></div>
<div class="item item-selected"><div class="item-inner">item</div></div>
<div class="item"><div class="item-inner">item</div></div>
<div class="item item-selected"><div class="item-inner">item</div></div>

CSS

body {
    margin: 30px;
    background: lightgrey;
}

* {box-sizing: border-box;}

.item {
    /* no transparent top/bottom border or it will cause gaps in side borders */
    width: 150px;
    height: 50px;
    background: transparent;
    position: relative;
}
    

.item-selected {
    background: white;
    box-shadow: 0 -2px 0px red, 0 2px 0 red; /* 2px because inner element shadow would overlap 1px of parent cell space */
    border-left: solid 1px red;
    border-right: solid 1px red;
}
    .item-selected .item-inner {
         border-left: solid 1px green;
         border-right: solid 1px green;      
         box-shadow: 0 -1px 0 green, 0 1px 0 green;
    }

.item-selected + .item-selected {
    box-shadow: 0 2px 0 red;
}

.item-selected + .item-selected .item-inner {
    box-shadow: 0 1px 0 green;
}

JavaScript

$('body').on('click', '.item', function() {
    $(this).toggleClass('item-selected');
});