title: how to force a hover selector to not occur on a specific div
body: <p>How do I exclude the first element in a list from being targeted by a <code>:hover</code> selector?</p>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.navbar .navbar-nav &gt; li :hover { 
    color:red !important;
  }
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;li&gt;
  @Html.ActionLink("Login", "Login", "Home", new { area = "" }, new 
  {@class ="navbar-item" })
  &lt;/li&gt;
  </code></pre>
  
  <p>What I have tried so far:</p>
  
  <pre><code>document.getElementsByClassName("navbar-item")[0].onmouseover = function () {
    mouseOver()
  };
  
  function mouseOver() {
    document.getElementsByClassName("navbar-item")[0].style.color="blue !important"
  }
  </code></pre>