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 · 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

One way is to use the multiple class selector  no space as that is the descendant selector     x000D   x000D   reMode hover not  reMode selected  hover  x000D    x000D     background-color   f0ac00  x000D    x000D   lt a href    title  Design  class  reMode design  reMode hover  gt  x000D       lt span gt Design lt  span gt  x000D   lt  a gt  x000D   x000D   lt a href    title  Design   x000D   class  reMode design  reMode hover reMode selected  gt  x000D       lt span gt Design lt  span gt  x000D   lt  a gt  x000D   x000D   x000D

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?

Method 1

Method 2

Method 3

Examples related to html

Examples related to css

Examples related to css-selectors