title: Twitter Bootstrap individual navbar menu item colors
body: <p>I have a navbar menu in Bootstrap like this:</p>
  
  <pre><code>&lt;ul class="nav navbar-nav navbar-right"&gt;
     &lt;li&gt;&lt;a href="#"&gt;Menu Item 1&lt;/li&gt;
     &lt;li&gt;&lt;a href="#"&gt;Menu Item 2&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="#"&gt;Menu Item 3&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="#"&gt;Change Color of this Menu Item&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I would like to change the color of the final list item so it does not inherit the standard color/hover properties. Is it possible to target just the final menu item via CSS and override my Bootstraps CSS?</p>
  
  <p>My CSS here:</p>
  
  <pre><code>.navbar-default .navbar-nav &gt; li &gt; a {
     color: #ffffff;
     font-family: "Fjalla One", sans-serif;
     text-transform: uppercase;
     font-size: 17px;
  }
  .navbar-default .navbar-nav &gt; li &gt; a:hover,
  .navbar-default .navbar-nav &gt; li &gt; a:focus {
     color: #0091c1;
     background-color: transparent;
  }
  </code></pre>