Css Not Selector

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

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

Solution 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:hovera { color:inherit; }
li:has(a:hover) { color:black; }