title: Apply CSS unless html contains a class
body: <p>Is it possible to apply a style to an item unless it contains a class? Take this html for example:</p>
  
  <pre><code>&lt;div class="nav"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;span class="selected"&gt;Page 1&lt;/span&gt;&lt;/li&gt;
          &lt;li&gt;&lt;span&gt;Page 2&lt;/span&gt;&lt;/li&gt;
          &lt;li&gt;&lt;span&gt;Page 3&lt;/span&gt;&lt;/li&gt;
          &lt;li&gt;&lt;span&gt;Page 4&lt;/span&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I currently have this CSS:</p>
  
  <pre><code>.nav li span{
      display: block;
      padding: 5px 0 5px 20px;
      cursor: pointer;
      border: solid 1px transparent;
      border-right: 0;
      border-left: 0;
      color: #777;
  }
  .nav li span.selected, .nav li:hover span{
      background-color: #deeaf4;
      border: solid 1px #2392F3;
      border-right: 0;
      border-left: 0;
      color: #000000;
  }
  .nav li:hover span{
      border: solid 1px transparent;
      border-right: 0;
      border-left: 0;
  }
  </code></pre>
  
  <p>When I hover over one of the spans, how can I apply the second CSS block <strong>UNLESS</strong> It contains the class <code>selected</code>?</p>