hover parent change child of child

Question

In the next example i want things to happen to my childs divs when i hover over the complete parent div. For example: i want the h2 and span of child1 to underline and the span of child2 to change from color (but not underline!).

Is this possible with pure css? Or should i consider using JQuery? If so, could you help me get started on this in Jquery?

           <div class="parent">
                <a href="#">
                    <div class="child1">
                        <h2>text</h2>
                        <span>text</span>
                    </div>
                    <div class="child2">
                        <span>text</span>
                    </div>
                </a>
            </div>

Answer 1

It's possible with CSS as you can target children of the hovered parent :

.parent:hover .child1 span, .parent:hover .child1 h2 {text-decoration: underline;}
.parent:hover .child2 span {color: red;}

FIDDLE