title: How to select the last child of each repeated series of classes using CSS?
body: <p>I am trying to create a chat application. Inside the chat container, I will add both sent and received messages. It is clear that the messages will not be in a specific order.</p>
  
  <p>I need to add some margin at the end of each repeated series of sent or received messages.</p>
  
  <pre><code>&lt;div class="container"&gt;
     &lt;div class="sent_message"&gt;&lt;/div&gt;
     &lt;div class="sent_message"&gt;&lt;/div&gt;
     &lt;!-- NEED MARGIN --&gt;
     &lt;div class="received_message"&gt;&lt;/div&gt;
     &lt;div class="received_message"&gt;&lt;/div&gt;
     &lt;div class="received_message"&gt;&lt;/div&gt;
     &lt;!-- NEED MARGIN --&gt;
     &lt;div class="sent_message"&gt;&lt;/div&gt;
     &lt;!-- NEED MARGIN --&gt;
     &lt;div class="received_message"&gt;&lt;/div&gt;
     &lt;!-- NEED MARGIN --&gt;
     &lt;div class="sent_message"&gt;&lt;/div&gt;
     &lt;div class="sent_message"&gt;&lt;/div&gt;
     &lt;!-- NEED MARGIN --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Is there any CSS selector to select the <code>last-child</code> of each of the series of classes, or should I change the structure of the HTML?</p>