How to use :not selector with links

Question

i have a hover effect for the links on my website. i want these to apply to every link EXCEPT ones in a particular div.

Example HTML

<div id="menu">
<div class="menu_item">
<a href="index.html" title="Home" target="_self">
<img src="_images/_menu/Home.png"
onmouseover="this.src='_images/_menu/homeHover.png'" 
onmouseout="this.src='_images/_menu/Home.png'" 
onclick="this.src='_images/_menu/homePressed.png'" alt=""/></a>
</div>
</div>

The CSS i have been trying to us

a:hover:not(.menu_item) {
background-color: #D6910E;
color: #FFE1A7;
} *no change*

a:hover:not(#menu) { *no change*

a:hover:not(#menu.menu_item) {  *turns off hover on all links*
a:hover:not(#menu .menu_item) {  *turns off hover on all links*

I thing you are using the selector very well, Where is your problem? — Abozanona, May 04 '15 at 04:39

score 2 · Answer 1 · 2015-05-04T05:16:52.027

want these to apply to every link EXCEPT ones in a particular div

The standard approach to such problems in CSS is to give the general rule first, then the specific rule to override it. Using :not is a slippery slope and should be reserved for special cases. So:

/* State the general rule first */
a:hover {
    background-color: #D6910E;
    color: #FFE1A7;
}

/* Give the exception */
.menu_item a:hover {
    background-color: transparent;
    color: inherit;
 }

If you do want to use :not, you have to understand that the predicate applies to the current element:

a:hover:not(#menu)

does not mean a tags being hovered which are not children of #menu; it means a tags being hovered which are not themselves #menu (which will always match). To do what you are trying to do with :not, you would want to try something like

:not(#menu) a:hover

However, this will also not work, because it means "a tags being hovered which have any ancestor which is not #menu", which will also almost always match.

score -1 · Answer 2 · edited May 04 '15 at 05:02

-1

Why you don't make it easier ?

Like

a:hover {
  background-color:red;
  color:red;
}

#menu .menu_item:hover{
    /* Default color */
}

In your case , you can repair it by change the position of "hover"

a:not(.menu_item):hover {
    background-color: #D6910E;
    color: #FFE1A7;
} /*no change*/

a:not(#menu):hover { /*no change*/ }

a:not(#menu.menu_item) :hover {  /*turns off hover on all links*/

a:not(#menu .menu_item):hover {  /*turns off hover on all links*/

Hope it 'll help you

edited May 04 '15 at 05:02

answered May 04 '15 at 04:53

LogPi

706
6
11

Changing the position of :hover isn't going to make any difference in any of the cases you have listed - the last two selectors are invalid because :not() only accepts a simple selector, and the first two are equivalent to the original ones respectively. – BoltClock May 04 '15 at 05:09

How to use :not selector with links

2 Answers2