CSS negation pseudo class not working

Question

I pay be asking too much of this negation pseudo.

I have an HTML structure like this:

<div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

In CSS, I have:

.item:hover .item:not(.item:hover) {
    opacity: 0.3;
}

I hoped that this would cause all the div.items to change opacity when I hover one, with the exception of the one I am hovering. But, it doesn't.

What gives?

Answer 1

For your use-case I'd suggest:

div:hover div.item {
    opacity: 0.3;
}

div:hover div.item:hover {
    opacity: 1;
}

JS Fiddle demo.

The problem is that your selector is looking for element with the class item, that is not hovered, within another element of the same class. Your posted CSS shows that the parent element does not have a class, and so the selector can never match.