title: CSS : last child no border
body: <p>Hi I have a problem with my CSS I have used this rule before but somehow it's not working this time</p>
  
  <p>I am trying to make a list that has a border on the bottom of every list item but the last. I have the following code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.menu li {
    border-bottom: .1rem solid #CCC;
    padding: 0;
  }
  
  .menu li:last-child {
    border: none;
  }
  
  .menu li a,
  .menu li div {
    display: block;
    padding: .5rem 0rem .5rem;
    border-bottom: .1rem solid #ccc
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="panel"&gt;
          {% comment %}
          {% endcomment %}
              &lt;h1&gt;All {{team.abbrev}} {% trans "Songs" %}&lt;/h1&gt;
              {% for chant in chants %}
              {% with chant.team as team %}
              &lt;ul class="menu"&gt;
                &lt;li&gt;                      
                    &lt;span&gt;
                        &lt;h6 style="margin-bottom:0;"&gt;
                          &lt;a href="{% url 'chant' team.slug chant.slug %}"&gt;{{ forloop.counter}}) {{ chant.name }}&lt;/a&gt;
                        &lt;/h6&gt;
                    &lt;/span&gt;        
                &lt;/li&gt;
              &lt;/ul&gt;            
          {% if forloop.counter == 5 %}
          {% include 'inc/adsense_listing.html' %}
          {% endif %}
          {% endwith %}
          {% endfor %}
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>