Remove hover style on parent when hovering on child with CSS

Question

I have a fiddle: http://jsfiddle.net/a80h6pts/1/

<style>
.myhover {
  width: 120px;
}
.myhover:hover p{
    color: #FED242!important;
}
</style>
<div id="divParent" class="myhover">
    <p>Some text</p>
    <p>Text text text</p>
    <div id="divChild" class="myhover">
        <p>Example text</p>
    </div>
</div>

When my mouse activates the over for #divParent, I want all <p> tags to change color except for the <p> inside #divChild. Then when I move my mouse to #divChild, I want all <p> tags inside it to change color and the <p> of #divParent back to their original color.

I cannot remove or change the class .myhover or use javascript. How can I do it only with CSS?

EDIT:

Badly, some people think i have to use js. I can use js (jquery) with a minimal impact on html/css.

Answer 1

With jQuery you can use:

$('#divParent').mouseover(function () {
    $('#divParent > p').addClass('hover')
}).mouseout(function () {
    $('#divParent > p').removeClass('hover')
})
$('#divChild').mouseover(function (e) {
    e.stopPropagation();
    $('#divChild > p').addClass('hover')
}).mouseout(function (e) {
    $('#divChild > p').removeClass('hover')
})

.myhover {
    width: 120px;
}
.hover {
    color: #FED242;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="divParent" class="myhover">
    <p>Some text</p>
    <p>Text text text</p>
    <div id="divChild" class="myhover">
        <p>Example text</p>
    </div>
</div>

As others have already noted, since there is no parent CSS selector you can't use CSS alone.