How to exclude particular class name in CSS selector

Question

I m trying to apply background-color when a user mouse hover the  element whose class name is  reMode hover    But I do not want to change color if the element also has  reMode selected   Note  I can only use CSS not javascript because I m working within some sort of limited environment   To clarify  my goal is to color the first  element on hover but not the second  element   HTML   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    I tried below hoping the first definition would work but it is not  What am I doing wrong   CSS     do not apply background-color so leave this empty     reMode selected  reMode hover hover        reMode hover hover       background-color   f0ac00

User · Accepted Answer

One way is to use the multiple class selector (no space as that is the descendant selector):

_x000D_

.reMode_hover:not(.reMode_selected):hover _x000D_
{_x000D_
   background-color: #f0ac00;_x000D_
}

_x000D_

<a href="" title="Design" class="reMode_design  reMode_hover">_x000D_
    <span>Design</span>_x000D_
</a>_x000D_
_x000D_
<a href="" title="Design" _x000D_
 class="reMode_design  reMode_hover reMode_selected">_x000D_
    <span>Design</span>_x000D_
</a>

_x000D_

User · Answer

Method 1  The problem with your code is that you are selecting the  remode hover that is a descendant of  remode selected  So the first part of getting your code to work correctly is by removing that space   reMode selected reMode hover hover   Then  in order to get the style to not work  you have to override the style set by the  hover  In other words  you need to counter the background-color property  So the final code will be    reMode selected reMode hover hover     background-color inherit     reMode hover hover     background-color   f0ac00      Fiddle  Method 2  An alternative method would be to use  not    as stated by others  This will return any element that doesn t have the class or property stated inside the parenthesis  In this case  you would put  remode selected in there  This will target all elements that don t have a class of  remode selected  Fiddle  However  I would not recommend this method  because of the fact that it was introduced in CSS3  so browser support is not ideal   Method 3  A third method would be to use jQuery  You can target the  not   selector  which would be similar to using  not   in CSS  but with much better browser support  Fiddle

User · Answer

In modern browsers you can do    reMode hover not  reMode selected  hover     Consult http   caniuse com css-sel3 for compatibility information

[html] How to exclude particular class name in CSS selector?

Examples related to html

Examples related to css

Examples related to css-selectors