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

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

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

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;
}

Ericgit · Accepted Answer · 2020-06-04 18:40:31Z

293

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

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

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

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

edited Jun 4, 2020 at 18:40

Ericgit

7,1413 gold badges50 silver badges59 bronze badges

answered Apr 24, 2013 at 20:56

Explosion Pills

192k56 gold badges341 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Makan Over a year ago

shouldn't it be: .reMode_hover:not('.reMode_selected'):hover In my experience those quotes are necessary.

Ben Johnson Over a year ago

@MakanTayebi You raise an excellent point regarding quotes around the selector. TL;DR: It is indeed best to use them. Thorough explanation at stackoverflow.com/a/5578880/1772379 .

Alex Rummel Over a year ago

Is that still the case? Haven't tried this in other browsers, but in the latest version of Firefox that I'm working in, the :not selector only worked when I removed the quotes.

imsky · Accepted Answer · 2013-04-24 20:56:18Z

34

In modern browsers you can do:

.reMode_hover:not(.reMode_selected):hover{}

Consult http://caniuse.com/css-sel3 for compatibility information.

answered Apr 24, 2013 at 20:56

imsky

3,28919 silver badges16 bronze badges

Comments

Cody Guldner · Accepted Answer · 2013-04-24 21:10:00Z

13

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

edited Apr 24, 2013 at 21:10

answered Apr 24, 2013 at 20:58

Cody Guldner

2,8941 gold badge27 silver badges36 bronze badges

1 Comment

ScottS Over a year ago

You should remove your "Method 3" that mentions jQuery since the OP specifically said "not javascript" for a solution.

Collectives™ on Stack Overflow

How to exclude particular class name in CSS selector?

3 Answers 3

3 Comments

Comments

Method 1

Method 2

Method 3

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Method 1

Method 2

Method 3

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related