CSS :not():hover selector

Question

<div class="parent">
    <div class="child">child1</div>
    <div class="child">child2</div>
    <div class="child">child3</div>
    <div class="child">child4</div>
    <div class="special">specialChild</div>
</div>

When hovering over one of the .child elements, I want to give all of the child elements of .parent to get another background color. This should not happen when hovering over the .special element.

What I tried so far:

.child {
    background-color: rgb(255,0,0);
}
.parent:not(.special):hover .child {
    background-color: rgb(0, 0, 255);
}

But when hovering over the .special element, the background color does change (ignoring the not() selector)

What am I missing?

JSFIDDLE: Link

EDIT: jQuery may be used as a solution.

Answer 1

To create a list of items it is better to use the appropriate tags.

Use the <ul> tag together with the <li> tag to create unordered lists. — w3schools.com.

<ul class="parent">
    <li class="child">child1</li>
    <li class="child">child2</li>
    <li class="child">child3</li>
    <li class="child">child4</li>
    <li class="special">specialChild</li>
</ul>

Then if you want to put the hover only on the items with the class .child you need to specify the class of element that is NOT the specified element for hover.

ul.parent li:hover:not(.special) {
    background-color: rgb(0, 0, 255);
}

jsFiddle

You can not use .parent:not(.special) because in this way you are selecting all ul.parents except ul.special (but there is no a parent with that class). The correct way would be: .parent li:not(.special).