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

score 284 · Accepted Answer · edited Jun 04 '20 at 18:40

284

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 04 '20 at 18:40

Ericgit

6,089
2
42
53

answered Apr 24 '13 at 20:56

Explosion Pills

188,624
52
326
405

3

shouldn't it be: .reMode_hover:not('.reMode_selected'):hover In my experience those quotes are necessary. – Makan Dec 16 '14 at 07:57
1

@MakanTayebi You raise an excellent point regarding quotes around the selector. TL;DR: It is indeed best to use them. Thorough explanation at https://stackoverflow.com/a/5578880/1772379 . – Ben Johnson Nov 21 '17 at 19:18
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. – Alex Rummel Jul 13 '20 at 00:53

score 32 · Answer 2 · answered Apr 24 '13 at 20:56

32

In modern browsers you can do:

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

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

answered Apr 24 '13 at 20:56

imsky

3,239
17
16

Cody Guldner · Answer 3 · 2013-04-24T21:10:00.940

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

You should remove your "Method 3" that mentions jQuery since the OP specifically said "not javascript" for a solution. — ScottS, Apr 25 '13 at 12:52

How to exclude particular class name in CSS selector?

3 Answers3

Method 1

Method 2

Method 3

Linked

Related