title: How to remove border-bottom of last div in a group - CSS
body: <p>How can I remove the border bottom of last div "footer_column"? Here is my HTML -</p>
  
  <pre><code>&lt;div id="footer_wrapper"&gt; &lt;!-- footer_wrapper starts here --&gt;
      &lt;div id="footer"&gt; &lt;!-- footer starts here --&gt;
      &lt;div class="footer_column"&gt;
          &lt;h4&gt;Digital Strategy&lt;/h4&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Link 2&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Link 3&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="footer_column"&gt;
          &lt;h4&gt;Search&lt;/h4&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;SEO&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Google AdWords&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Bing Ads&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Remarketing&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="footer_column"&gt;
          &lt;h4&gt;Social&lt;/h4&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Facebook Ads&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Youtube Ads&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="footer_column"&gt;
          &lt;h4&gt;Conversion&lt;/h4&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Landing Page Creation&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;A/B Testing&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="footer_column"&gt;
          &lt;h4&gt;Contact Us&lt;/h4&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;About Us&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Blog&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
          &lt;div class="clr"&gt;&lt;/div&gt;
  
          &lt;div id="copyright"&gt;
              &lt;p&gt;&amp;copy; 2014.&lt;/p&gt;
          &lt;/div&gt;
  
      &lt;/div&gt; &lt;!-- footer ends here --&gt;
  &lt;/div&gt; &lt;!-- footer_wrapper ends here --&gt;
  </code></pre>
  
  <p>This is CSS -</p>
  
  <pre><code>/* footer */
  .footer_column
  {
      float:none;
      width:100%;
      margin-bottom:5%;
      padding-bottom:10px;
      border-bottom:1px solid #8f8f8f;
  }
  
  .footer_column:last-child
  {
      border-bottom:none;
  }
  </code></pre>
  
  <p>But it's not working. The last div "footer_column" still have border bottom. I know I can remove it by using first-child and border-top but I don't want to do that. I only want to do it with border-bottom and last-child. Please help me on this.</p>