title: Selecting the first <li> in a navigation bar
body: <p>I'm trying to select the first <code>&lt;li&gt;</code> element of a my page's navigation bar so that I can make it half the size of the other items in the navigation bar.</p>
  
  <p>Here is my CSS:</p>
  
  <pre><code>.nav{
      border-width:1px 0;
      list-style:none;
      margin:0;
      padding:0;
      text-align:center;
      padding-bottom: 8px;
      font-size: 11px;
  }
  .nav li{ display:inline; }
  
  .nav li:first-of-type { width: 50px; }
  
  .nav li a {
      width: 118px;
      height: 30px;
      padding: 8px;
      display:inline-block;
      text-decoration: none;
      color: white;
      background-color:#666666;
      text-align: center;
  }
  
  .nav li a:hover { background-color:#555555; }
  
  .nav li.selected a { background-color: #FF731E; } 
  </code></pre>
  
  <p>And here is the HTML: </p>
  
  <pre><code>&lt;div class="navbar"&gt;
      &lt;ul class="nav"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="page01.html"&gt;Page1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="page02.html"&gt;Page2&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="page03.html"&gt;Page3&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="page04.html"&gt;Page4&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="page05.html"&gt;Page5&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have tried various things, including <code>:first-child</code> and <code>:first-of-type</code> but I can't seem to select the first item (which will be a home icon).</p>
  
  <p>Nothing even managed to affect the page, unless I used <code>.nav li a:first-of-type</code> which made all the items 50px which was not my intended result.</p>