Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS :not selector - exclude multiple classes from hover

Tags:

css

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

like image 386
Wolf War Avatar asked Aug 01 '17 13:08

Wolf War


People also ask

How do I exclude a selector in CSS?

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.

Is hover a 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.

Can you chain not CSS?

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(.

Which is not a CSS pseudo class?

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.


1 Answers

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>
like image 51
Mike Donkers Avatar answered Oct 23 '22 06:10

Mike Donkers