title: Group elements with CSS
body: <p>I made a quick template to explain what I am trying to achieve:
  <a href="http://codepen.io/anon/pen/XJWrjO" rel="noreferrer">http://codepen.io/anon/pen/XJWrjO</a></p>
  
  <p>As you can see, there is two classes ofelements. <code>.one</code> and <code>.two</code></p>
  
  <p>I want to group the following elements with each other via css. This will be a visual grouping; not a structural grouping.</p>
  
  <p>Shortly, what I want to do is, to give <code>margin-top</code> to the first element for each class cluster, and <code>margin-bottom</code> to the last element of each cluster.</p>
  
  <p>So, depending on my example here are the clusters:</p>
  
  <pre><code>1,2,3,4         - red cluster
  5,6,7           - cyan cluster
  8,9             - red cluster
  10,11,12,13,14  - cyan cluster
  15              - red cluster
  16,17           - cyan cluster
  </code></pre>
  
  <p>So according to this structure, for instance, div5 would have a <code>margin-top</code> and div7 would have a <code>margin-bottom</code>.</p>
  
  <p>Or, div5 would have a <code>margin-top</code> and div8 would have a <code>margin-top</code> (similar result with the previous statement)</p>
  
  <p>Any kind of solution that allows visual grouping of the similar classed items that follow each other, is accepted.</p>
  
  <p>No JS, only CSS.</p>