title: How to style the first and last li with CSS or jQuery?
body: <p>How can I style the first (top level) <code>li</code> and the last (top level) <code>li</code> with CSS or jQuery?</p>
  
  <p>I am using CSS to set the first <code>li</code> style but it is also styling the first <code>li</code> in each secondary level <code>ul</code>, so how can I get it to style only the <code>li</code> with Main 1 in it and the last one with Main 6 in it?</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;style&gt;
  ul li:first-child
  {
  width: 800px;
  border:1px solid #fc5604; border-top-width:thin; (2px)
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>and HTML:</p>
  
  <pre><code>&lt;div id="nav"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Main 1&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Sub 1a&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Sub 1b&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Sub 1c&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Main 2&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Sub 2&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Main 3&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Sub 3&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Main 4&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Sub 4&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Main 5&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Main 6&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Sub 6&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;   
  &lt;/div&gt;
  </code></pre>