Can I use ":hover" effect to affect html tag CSS which is higher in the nesting hierarchy?

Question

Can I use ":hover" effect to affect html tag which is higher in the nesting hierarchy? I am trying to affect element's CSS property by hovering over element lover in the hierarchy. As in example below. HTML example

<div>
  <ul>
    <li>
      <a>link</a>
    </li>
  </ul>
</div>

CSS example /* Usualy this is how we use it */

ul>li{
   color:red;
}

/* How can I use it other way round? */

li>div{
   color:blue;
}

/* or ? */

li>ul{
   color:yellow;
}

/* or ? */

a>div{
   color:black;
}

Examples most welcome. Thank you very much guys.

It's not clear what are you trying to do. li>ul, for example, means you reach a UL which is child of a LI .What of these elements are you trying to change state? — Fabio, Oct 03 '13 at 12:27
see this may be useful http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector — Bhushan Kawadkar, Oct 03 '13 at 12:28
The short answer is no, you can't. You can use javascript to do such a thing though. — Rich, Oct 03 '13 at 12:29
I am trying to affect elements CSS property by hovering over element lover in the hierarchy. As in example above. — DevWL, Oct 03 '13 at 12:30

score 3 · Accepted Answer · answered Oct 03 '13 at 12:30

3

I believe that the best (and possibly only) way to do this is with the use of jQuery.

jQuery("a").parent("div').addClass('class_name');

then you can define the style using the class instead. To remove the class:

jQuery("a").parent("div').removeClass('class_name');

answered Oct 03 '13 at 12:30

Nick Bernhard

106
4

instead of adding a class can you also add CSS property ? – DevWL Oct 03 '13 at 12:41
1

I would think it would be easier to maintain the code if you use a class. But then again, I suppose that's personal preference more than anything. Just seems that semantically, it would make more sense to assign a class of "hover" and then it would be clear in the CSS along with the rest of the styling. – Nick Bernhard Oct 03 '13 at 18:34

score 0 · Answer 2 · edited May 23 '17 at 12:13

0

It is possible in CSS4. But it is not supported in any of the major browsers.

You may find your answer here

edited May 23 '17 at 12:13

Community

1
1

answered Oct 03 '13 at 12:29

Beniamin Szabo

1,909
4
17
26

Not even in CSS4. See http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#comment23407732_1014958 – Rob W Oct 03 '13 at 12:31
1

Is that answer equals to == "There is no way to do that in CSS that will work properly in most browsers ?" Is that right ? – DevWL Oct 03 '13 at 12:39
Yes, that's the bottom line – Stephan Muller Oct 03 '13 at 12:50

Can I use ":hover" effect to affect html tag CSS which is higher in the nesting hierarchy?

2 Answers2