title: How to remove <ul> unordered list's last <li> list item's border using CSS without changing anything in HTML code?
body: <p>How can I remove a <code>&lt;ul&gt;</code> unordered list's last <code>&lt;li&gt;</code> list item's border using CSS without adding any class to the last list item?</p>
  
  <p>See live example here: <a href="http://jsbin.com/umose" rel="nofollow noreferrer">http://jsbin.com/umose</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body { background-color: #fff; font: 16px Helvetica, Arial; color: #000; }
  li
  {
      display: inline;
      list-style-type: none;
      padding:0 20px 0 20px;
      border-right:1px solid green;
  }
  #navlist li:last-child { border-right: ; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p id="hello"&gt;&lt;/p&gt;
  &lt;ul id="navlist" &gt;
    &lt;li &gt;&lt;a href="#" id="current"&gt;Item one&lt;/a&gt;&lt;/li&gt;
    &lt;li id="active"&gt;&lt;a href="#"&gt;Item two&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Item three&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Item four&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Item five&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>