title: How to exclude particular class name in CSS selector?
body: <p>I'm trying to apply background-color when a user mouse hover the  element whose class name is <code>"reMode_hover"</code>.</p>
  
  <p>But I do not want to change color if the element <strong>also</strong> has <code>"reMode_selected"</code></p>
  
  <p>Note: I can only use CSS not javascript because I'm working within some sort of limited environment.</p>
  
  <p>To clarify, my goal is to color the first  element on hover but not the second  element.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;a href="" title="Design" class="reMode_design  reMode_hover"&gt;
      &lt;span&gt;Design&lt;/span&gt;
  &lt;/a&gt;
  
  &lt;a href="" title="Design" 
   class="reMode_design  reMode_hover reMode_selected"&gt;
      &lt;span&gt;Design&lt;/span&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>I tried below hoping the first definition would work but it is not. What am I doing wrong?</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>/* do not apply background-color so leave this empty */
  .reMode_selected .reMode_hover:hover 
  {
  }
  
  .reMode_hover:hover 
  {
     background-color: #f0ac00;
  }
  </code></pre>