title: How do I target only elements that are followed by another (specific) element?
body: <p>I have some code that is generated by a Drupal view. It looks like this (stripped down for clarity):</p>
  
  <pre><code>&lt;div class="group_content"&gt;
    &lt;h3&gt;Header Link&lt;/h3&gt;
    &lt;div class="row odd"&gt;Here's some content&lt;/div&gt;
    &lt;h3&gt;Another Header Link&lt;/h3&gt;
    &lt;div class="row even"&gt;Here's some more content&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="group_content"&gt;
    &lt;h3&gt;Header Link 2&lt;/h3&gt;
    &lt;div class="row odd"&gt;Here's some content 2&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Because this is generated by a CMS, there's a limit to what I can do about the rendered code - for example, I can't add an even/odd class to the h3 elements. </p>
  
  <p>How can I (in css) target only the <code>div class=row</code> that is followed by another <code>div class=row</code>? If there are more than one row in a group, I need to add a bottom border to the div to act as a visual separator. So, using my example code, there would be a border applied to <code>div class="row odd"&gt;Here's some content&lt;/div&gt;</code> because it has another row following it. </p>
  
  <p>I'm a backend developer, so CSS is not my strong suit. We do need to support IE7.</p>