Apply specific margins to first and last element that are not siblings - html

Question

I have specific type of boxes in my HTML that have, let's say margin: 10px; to all of them. They are displayed in a row on the page (using Bootstrap) and I want to remove the left margin of the first element and the right margin of the last element. I could use :first-child or :first-of-type and their respective lasts but the elements are not siblings and they do not have a common parent. The HTML looks something like this:
<div class='container'>
<div class='col-md-2'>
<div class='MY-CUSTOM-BOX'>
</div>
</div>
<div class='col-md-5'>
<div class='MY-CUSTOM-BOX'>
</div>
</div>
<div class='col-md-5'>
<div class='MY-CUSTOM-BOX'>
</div>
</div>
</div>
:first-of-type applies to all boxes, not sure how to approach the :first-child because of the nested divs. Any ideas?

Answer 1

It looks like you could use a combination of css selectors to achieve this, namely the > as well as :first-child and :last-child
:first-child > .MY-CUSTOM-BOX {
margin-left: 0;
}
:last-child > .MY-CUSTOM-BOX {
margin-right: 0;
}
This selects the direct MY-CUSTOM-BOX descendants of any first and last child elements.
That should work where the boxes have the same level of parent (i.e. container -> div -> MY-CUSTOM-BOX)
You could also do it the other way round which may give you better results depending on how nested you are:
.container > :first-child .MY-CUSTOM-BOX {
margin-left: 0;
}
.container > :last-child .MY-CUSTOM-BOX {
margin-right: 0;
}
This selects the first and last child of container and then gives any MY-CUSTOM-BOX elements inside it margin left/right of 0.
Here's a (relatively crude) fiddle demonstrating both examples: https://jsfiddle.net/ttakchr1/