CSS Not Selector

Question

I'm trying to use a :not() CSS selector, and I've tried multiple combinations of this and nothing is working.

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

I would like it to be that when I hover over an href in #steps , it doesn't highlight the rest of the containing <li> .

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

So when hovering over .wa a it should just underline that.

When hovering over the <li> it should just change the color of everything including the 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 overs over a list item that is not an anchor . An <li> will never be a <a> .

I would like it to be that when I hover over an href in #steps, it doesn't highlight the rest of the containing <li> .

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

The problem here is that you cannot point the mouse at the link without also pointing it at the list item that the link is inside.

CSS 4 proposes :has() which would allow:

li:hover {
    color: rgb(66, 81, 95)l
}

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

… but nothing currently supports that so what you are looking for is impossible in CSS at present. You could use JavaScript to add and remove classes from the list item when the anchor is hovered though.

Answer 2

This li:not(a) makes no sense. Element cannot have li and `a' tags at the same time.

What you need here is a hypothetical :has() selector but it does not exist yet . Only with it it would be possible to achieve what you want:

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