Change color of parents when child link is active

Question

I want to do something like this. I have a link inside a parent and I want to change the background of the parent and the link both whenever I click on the link. Is it possible?

Here is my fiddle http://jsfiddle.net/x5m5m035/

a:active {
   background-color: yellow;
}
div{
   background-color: red; 
}

So when I click on the link, parent's background color should also be yellow.

I am sorry if it is too silly to ask.

Thanks

possible duplicate of [Is there a CSS parent selector?](http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) — Paulie_D, Aug 29 '14 at 15:11
Not without JS. I presume there's some reason why you don't just style the link to be like a `div`? (eg: http://jsfiddle.net/x5m5m035/2/) — Moob, Aug 29 '14 at 15:14
If you make the `` block-level you it would fill the `
` and you wouldn't have the issue (http://jsfiddle.net/x5m5m035/6/) — Moob, Aug 29 '14 at 16:32

score 2 · Accepted Answer · answered Aug 29 '14 at 15:16

It's not possible using pure CSS because CSS hasn't parent selector, but you can do that using javascript or JQuery.

Try this JQuery code for instance:

$('a').mousedown(function() {
    $(this).parent("div").css("background-color","yellow");
}).mouseup(function() {
    $(this).parent("div").css("background-color","red");
});

Check JSFiddle Demo

score 0 · Answer 2 · answered Aug 29 '14 at 15:27

0

There's no way to implement if without scripts.

answered Aug 29 '14 at 15:27

Alex Velickiy

541
1
7
22

Change color of parents when child link is active

2 Answers2