Apply specific margins to first and last element that are not siblings <p>I have specific type of boxes in my HTML that have, let's say <code>margin: 10px;</code> 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 <code>:first-child</code> or <code>:first-of-type</code> and their respective <code>lasts</code> but the elements are not siblings and they do not have a common parent. The HTML looks something like this:</p> <pre><code>&lt;div class='container'&gt; &lt;div class='col-md-2'&gt; &lt;div class='MY-CUSTOM-BOX'&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class='col-md-5'&gt; &lt;div class='MY-CUSTOM-BOX'&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class='col-md-5'&gt; &lt;div class='MY-CUSTOM-BOX'&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p><code>:first-of-type</code> applies to all boxes, not sure how to approach the <code>:first-child</code> because of the nested <code>divs</code>. Any ideas?</p>