Changing background-color of parent element on hover

Question

Below is my html code.

        <div class="container">
            <a class="link1" href="">Link1</a>
            <a class="link2" href="">Link2</a>
            <a class="link3" href="">Link3</a>              
        </div>

Is there any selectors in CSS that when I hover mouse on Link1 or Link2, the background-color of container gets change. Since I am new & self thought that's why I have some problems.

Answer 1

CSS4 (yup) introduces the :has() psuedo-class ( http://dev.w3.org/csswg/selectors4/#relational ) however this not currently supported by any current (as of September 2014) engine or browser.

If it was supported, then the (currently proposed) syntax would be:

div.container:has(a.link1:hover) { background-image("link1.png"); }
div.container:has(a.link2:hover) { background-image("link2.png"); }
div.container:has(a.link3:hover) { background-image("link3.png"); }

Until then, you'll need to rely on Javascript, such as jQuery's similar has ( http://api.jquery.com/has/ ).