CSS Not Selector

Question

I am trying to use the CSS :not() selector and I have tried several combinations of this and nothing works.

My code is here: http://jsfiddle.net/cLevkr4e/2/

I would like it to not highlight the rest of the containing <li> when hovering over href in #steps .

I would also like that when you hover over the <li> in #steps he #steps hover color change to everything, including anchor tags.

Thus, when you hover over .wa a it should just emphasize this.

When you hover over <li> it should just change the color of everything, including anchors, to rgb(66, 81, 95) .

My CSS:

  .wa a{ color: rgb(68, 118, 67); } .steps { width:400px; margin:0 auto; text-align:left; line-height: 200%; } .steps a:hover { text-decoration: underline; } .steps li:not(a):hover{ cursor: pointer; color: rgb(66, 81, 95); } 

My HTML:

 <div class="steps"> <ul> <li>Apply an Email To Your Nation</li> <li>Apply To the <span class="wa"><a href="http://www.nationstates.net/page=un">World Assembly</a></span> With That Email</li> <li>Join the <span class="wa"><a href="http://www.nationstates.net/page=un">World Assembly</a></span></li> </div> 

Answer 1

Your selector ( li:not(a):hover ) says: When the user iterates over a list item that is not an anchor. <li> will never be <a> .

I would like it to not highlight the rest of the containing <li> when hovering over href in #steps.

When you hover over <li> you just need to change the color of everything, including anchors, to rgb(66, 81, 95) .

The problem is that you cannot point the mouse pointer to a link without also pointing to the list item in which the link is located.

CSS 4 offers :has() , which will allow:

 li:hover { color: rgb(66, 81, 95)l } li:hover:has(a:hover) { color: black; } 

... but nothing currently supports the fact that what you're looking for is not possible in CSS at the moment. You can use JavaScript to add and remove classes from a list item when the anchor hangs.

Answer 2

This li:not(a) makes no sense. An element cannot have li and `a 'tags.

What you need is a hypothetical: has () selector, but it does not exist yet . Only with this could you achieve what you want:

 li:hover { color:red; } li:hover a { color:inherit; } li:has(a:hover) { color:black; }