Avoid hover effect on specific Child div though hover applied to Parent div

Question

I have an issue with hover

I have 3 child div's like:

<div class="parent">
    <div class="child1">A</div>
    <div class="child2">B</div>
    <div class="child3">C</div>
</div>

I had applied hover on parant div to change color on child1 and child2 div. Yet hover is applied over child3 div too....

Is there a way to exclude hover on child3 alone??

Any help is appreciated. Thanks in advance.

div.parent:hover {
    color: #909090;
}

In the the above example there has to be no change of color on font "C" though it is present inside parant div.

Answer 1

Just make your CSS more specific:

.parent:hover .child1, .parent:hover .child2 {
    color:#909090;
}