title: how to remove the border from the last list item and select :nth-child (multiple items)
body: <p>How do i select the third link to remove the right border? The first three are text links and I want to remove the right-border from the last text link.  The last two are buttons.  I don't want the borders between or at the end of the buttons either. I can't believe how much trouble I am having with this.  Its probably a simple solution but it's taking me forever to figure it out for browsers.  Thanks.</p>
  
  <p>Javascript</p>
  
  <pre><code>&lt;script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script language="javascript"&gt;
          $(document).ready(function() {
          $("ul.subnavigation li:nth-child(3)").addClass("last-child");
      });
          &lt;/script&gt;
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;ul class="subnavigation"&gt;
                  &lt;li&gt;&lt;a href="$sign_in_url" id="Program" rel="nofollow" &gt;&lt;/a&gt;Program &lt;/li&gt;
                  &lt;li&gt;&lt;a href="$sign_in_url" id="About" rel="nofollow" &gt;About &lt;/a&gt; &lt;/li&gt;
                  &lt;li&gt;&lt;a href="$sign_in_url" id="faq" rel="nofollow" &gt;How to/FAQs&lt;/a&gt; &lt;/li&gt;
                  &lt;li&gt;&lt;a href="$sign_in_url" id="register" rel="nofollow" class="btn_register hide-text"&gt;Register&lt;/a&gt; &lt;/li&gt;
                  &lt;li&gt;&lt;a href="$sign_in_url" id="signin" rel="nofollow" class="btn_signin hide-text"&gt;Sign in&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>ul.subnavigation {  
      font-family:Arial, sans-serif; 
      font-weight:bold; 
      font-size:16px;
      color:#333333; 
      list-style:none;
      }
  
  .subnavigation li{
      display:inline;
      border-right:1px solid #ccc;
  }
  
  .subnavigation li:last-child{
      display:inline;
      border-right:0px;
  }
  
  
  .last-child {border:none;}
  
  .subnavigation li a   {
      text-decoration:none;
      padding:0 10px 0 10px;
      line-height:18px;
  
      }
  
  .subnavigation li a:hover {
      color:#2274ac;
      }
  
  
  .subnavigation a.btn_register {
      background:url(../images/nt_btn-register.png) no-repeat;
      width:66px; 
      height:23px;
      display:inline-block;
      margin:0 5px 0 0;
      float:right;
      text-indent:-999px;
      }
  
  .subnavigation a.btn_signin {
      background:url(../images/nt_btn-signin.png) no-repeat;
      width:56px; 
      height:23px;
      display:inline-block;
      margin:0 10px 0 5px;
      float:right;
      text-indent:-999px;
      }
  
  .hide-text {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/Chris22/A46Ka/1/" rel="nofollow">JS FIDDLE here</a></p>