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
In CSS, to exclude a particular class, we can use the pseudo-class :not selector also known as negation pseudo-class or not selector. This selector is used to set the style to every element that is not the specified by given selector.
Definition and UsageThe :hover selector is used to select elements when you mouse over them. Tip: The :hover selector can be used on all elements, not only on links.
There are no logical combinators with :not() , like and or or , but you can chain them, which is effectively like and . The :not() selector doesn't add any specificy by itself, but what is inside does, so :not(.
The :not() CSS pseudo-class represents elements that do not match a list of selectors. Since it prevents specific items from being selected, it is known as the negation pseudo-class.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With