Styling CSS consecutively

Question

I have the following scenario:

This HTML is dynamically generated and continually growing.

<div id="messages">
    <div class="message person-1">
    <div class="message person-1">
    <div class="message person-2">
    <div class="message person-2">
    <div class="message person-2">
    <div class="message person-1">
    ...
</div>

Applying normal styling I get this:

However, I wish to group consecutive messages by the same person. This would mean, for each consecutive group, removing the margin between consecutive classes when they're not the first or last-child and also altering the first and last child's border radii.

I have looked into this: http://www.sitepoint.com/contiguous-sibling-selector/ but not sure how to get that to work for a list of indeterminate length.

Is this possible at all?

Answer 1

Without changing the HTML, we can use the + selector to select continuous messages from the same person. We can then overlap the border-radius to hide it:

.person-1 + .person-1,
.person-2 + .person-2 {
  margin: -10px 5px 0;
}

Complete Example

#messages {
  width: 200px;
}
.message {
  padding: 10px;
  color: #FFF;
  margin: 5px 5px 0;
  width: 100px;
  border-radius: 5px;
}
.person-1 {
  background: green;
  float: left;
  clear: both;
}
.person-2 {
  background: purple;
  float: right;
  clear: both;
}
.person-1 + .person-1,
.person-2 + .person-2 {
  margin: -10px 5px 0;
}
img {
  padding-top: 10px;
}

<div id="messages">
  <div class="message person-1">Hello How are you?</div>
  <div class="message person-2">Good thanks</div>
  <div class="message person-2">and you?</div>
  <div class="message person-2">:)</div>
  <div class="message person-1">I'm so great!</div>
  <div class="message person-2">Awesome</div>
  <div class="message person-1">Yeah!</div>
  <div class="message person-2">Plz Respond</div>
  <div class="message person-2">Plz Respond</div>
  <div class="message person-2">Plz Respond
    <img src="http://www.placehold.it/100x100">
  </div>
  <div class="message person-2">Plz Respond</div>
  <div class="message person-1">Yeah!</div>
  <div class="message person-1">hi!</div>
  <div class="message person-1">hi!</div>
</div>