14

I'm combining three classes on elements 

base, base_green, base_blue

I'm using this to add hover effect only to base class (without base_green)

.base:not(.base_green):hover {
    background-color: #E2E2E2;
}

How can I achive that with two classes?
meaning that, if element has base base_green or base base_blue, do not add hover effect on it
eg. something like this (doesn't work ofc) 

.base:not(.base_green):not(.base_blue):hover {
    background-color: #E2E2E2;
}

EDIT:
Thank you all for answers, my initial solution works fine
I had a typo in that concatenated sausage of :not selectors in my css file
/facepalm

I'll leave question as it is, maybe someone finds it useful

Wolf War
  • 1,503
  • 1
  • 15
  • 28
  • 2
    Possible duplicate of [Can I have multiple :not() selectors?](https://stackoverflow.com/questions/5684160/can-i-have-multiple-not-selectors) – Georgy Ivanov Aug 01 '17 at 13:19
  • No idea if you have other elements with classes containing the phrase "base_" that require this hover state applied, but if not, you could try `.base:not([class*="base_"]):hover` - otherwise, it may be easier to add a class, if possible, to elements that should not have this state applied and use that as a selector instead. – UncaughtTypeError Aug 01 '17 at 13:20
  • 1
    It's working for me, at least in Chrome: https://jsfiddle.net/7assquqp/ – Björn Tantau Aug 01 '17 at 13:23

1 Answers1

22

This:

.base:not(.base_green):not(.base_blue):hover {
    background-color: #E2E2E2;
}

works perfectly fine if thrown in a JSFiddle

Tested with the following HTML:

<div class="base base_green">GREEN</div>
<div class="base base_blue">BLUE</div>
<div class="base base_green base_blue">GREEN & BLUE</div>
<div class="base">BASE</div>
Mike Donkers
  • 3,589
  • 2
  • 21
  • 34