title: How to Remove border-right for a last-child of a list items while using multiple un-ordered lists
body: <p>I want to remove the last child border-right for a list a elements as follows, I tried with different types to remove it but is not working for this, kindly help me to solve this.</p>
  
  <pre><code>&lt;header&gt;
    &lt;div id="tag" &gt;
      &lt;ul id="menu-item" class="nav"&gt;
         &lt;li id="item-1" class="item-type"&gt; &lt;a href="index.html"&gt; Home &lt;/a&lt;/li&gt;
         &lt;li id="item-2" class="item-type"&gt; &lt;a href="about.html"&gt; About Me &lt;/a&gt;&lt;/li&gt;
         &lt;li id="item-3" class="item-type"&gt; &lt;a href="contact.html"&gt; Contact &lt;/a&gt; &lt;/li&gt;
         &lt;li id="item-4" class="item-type"&gt; &lt;a href="map.html"&gt; Map &lt;/a&gt; &lt;/li&gt;
      &lt;/ul&gt;
   &lt;/div&gt;
   &lt;div id="head"&gt;
     &lt;ul id="ul-head"&gt;
        &lt;li id="head-1" &gt; &lt;a href="/"&gt; &lt;img id="profile" src="Images/display.jpg" alt="profile" width="80px" height="80px" /&gt; &lt;/a&gt; &lt;/li&gt;
        &lt;li id="head-2" class="head-item"&gt; TECHNOLOGIES &lt;/li&gt;
        &lt;li id="head-3" class="head-item"&gt; RESUME &lt;/li&gt;
        &lt;li id="head-4" class="head-item"&gt; FUTURE SCOPE &lt;/li&gt;
        &lt;li id="head-5" class="head-item"&gt; INTEREST &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>Applied CSS as follows :</p>
  
  <pre><code>#menu-item {
     position: absolute;
     display: block;
     list-style-type: none;
     float: right;
     left: 850px;
     padding: 9px 10px 9px 10px;
     text-align: center;
     margin: 0px
   }
  #menu-item &gt; li {
       float: left;
       display: inline;
       border-left: 1px solid #fff ;
        padding: 1px 15px 1px 15px;
      }
  .item-type a {
        color: #FFFFFF;
        text-decoration: none;
     }
  
  #head #ul-head #head-1 a #profile {
          position: absolute;
          border-radius: 50%;
          display: inline;
          left: 140px;
          top: 0px
      }
  
  .head-item {
           position: relative;
           font-size: 16px;
           font-family: Arial;
           font-weight: bold;
           left: 230px;
           top: 15px;
           color: #778899;
        }
  #ul-head &gt; li {
            float: left;
            display: inline;
            border-right: 1px solid #000000;
            padding: 1px 25px 1px 25px;
            text-align: center;
       }
  #tag #menu-item li:first-child a {
          border-left: none;
       }
  #head #ul-head li:last-child a {
           border-right: none;
       }
  </code></pre>