title: target the last hr within repeating div
body: <p>I have a section that has a repeating div coming from the database and within there there is an hr to separate them, but I need to hide the last one in the list.</p>
  
  <p>So my html looks like this.</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="reply"&gt;
      &lt;p&gt;wonderful paragraph&lt;/p&gt;
      &lt;hr&gt;
    &lt;/div&gt;
    &lt;div class="reply"&gt;
      &lt;p&gt;wonderful paragraph&lt;/p&gt;
      &lt;hr&gt;
    &lt;/div&gt;
    &lt;div class="reply"&gt;
      &lt;p&gt;wonderful paragraph&lt;/p&gt;
      &lt;hr&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have tried targeting with last-child a few different ways, but I cant seem to get it right.</p>
  
  <pre><code>.container:last-child .reply hr{
    display:none;
  }
  
  .reply:last-child hr{
    display:none;
  }
  
  .container .reply:last-child hr{
    display:none;
  }
  </code></pre>
  
  <p>Any help would be wonderful!</p>
  
  <p>the styles I have on my hr</p>
  
  <pre><code>.reply hr{
    border: 0;
        height: 1px;
        background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.15), rgba(0,0,0,0)); 
        background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
        background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
        background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    margin:0;
  }
  </code></pre>