Using CSS, how do I change the font color of parent
tag if child
tag is hovered over

Question

HTML:

<ul>
<li>LINK 1</li>
<li>LINK 2</li>
<li>LINK 3
   <ul>
   <li>link 3.1</li>
   <li>link 3.2</li>
   </ul>
</li>
</ul>

How would I modify this in CSS to where if link 3.1 or 3.2 are hovered over, it will change the text color for LINK 3 (the parent link).

I hope I made this simple enough and asked in the best way possible. I know how to change the text color of each thing independently, just don't know how to change the text color of the parent li tag.

So basically if Link 3.1 is hovered over, it turns blue. But, since 3.1 is apart of LINK 3, I want LINK 3 to also be blue (or any other color) if 3.1 is hovered over. — kdjernigan, Jul 20 '13 at 04:39
possible duplicate of [Is there a CSS parent selector?](http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) — , Jul 20 '13 at 07:02

score 2 · Answer 1 · edited May 23 '17 at 10:32

2

Unfortunately, currently it isn't possible to select the parent of an element with CSS, which is what you'll ultimately need to do. You will need to resort to javascript for that.

See this very similar (in scope) question and for quick solutions achieved with jQuery: Is there a CSS parent selector?

edited May 23 '17 at 10:32

Community

1
1

answered Jul 20 '13 at 04:36

could have sworn I'd seen this done with css a long time ago. I don't recall seeing any javascript being used. – kdjernigan Jul 20 '13 at 04:39
I was able to achieve the results I was looking for with just CSS. My answer is below. – kdjernigan Jul 20 '13 at 05:05
That works :), but you improvised and worked around targeting the parent after the child element was hovered on. Still a functional solution if you're ok with that and don't want something more robust. – Jul 20 '13 at 05:10
You are right. My main problem is I'm using the link tag within the li to modify color, so the traditional hover tags weren't working for me. So I had to modify the css to make it see around my color. A more descriptive comment is in my answer. – kdjernigan Jul 20 '13 at 05:19

Sterling Camden · Answer 2 · 2013-07-20T04:48:50.020

2

if i understand your question right: you can target the parent li and then override the children's color.

<ul>
<li>LINK 1</li>
<li>LINK 2</li>
<li>LINK 3
   <ul>
   <li>link 3.1</li>
   <li>link 3.2</li>
   </ul>
</li>
</ul>

li:hover{
    color:blue;

}

li > ul > li{
    color: black;
}

here's a jsfiddle: http://jsfiddle.net/eedWZ/1/

if you need different sub li's to trigger different colors on the parent, that is impossible via css as far as i know, but could be done easily with javascript. let me know if that was your intention and i can help with the javscript for that.

edited Jul 20 '13 at 04:48

answered Jul 20 '13 at 04:39

Sterling Camden

278
2
7

it doesn't use anything unusual, so yes i believe it will work in all browsers. – Sterling Camden Jul 20 '13 at 04:43
It can be done without Javascript with CSS3 but you lose the cross browser support – nathanchere Jul 20 '13 at 04:43
@kdjernigan if you want the child link that you are hovering to also light up, just take out the "!important", i edited to reflect the change – Sterling Camden Jul 20 '13 at 04:46
@kdjernigan does this not achieve the effect you were going for? – Sterling Camden Jul 20 '13 at 05:01
I couldn't get yours to work for some reason on my site; however, seeing yours did enable me to see another solution that I was more familiar with seeing and was able to get it to work. I am posting my solution. – kdjernigan Jul 20 '13 at 05:01
Actually, the reason it didn't work (in my opinion) is because I am using the links inside the `
` tag to modify color ( `ul li a:hover { color: red; }` ) instead of just the `
` tag itself. So I kept trying to modify yours; however, couldn't get it to work with mine. So that is probably why yours didn't work for me.

kdjernigan

Jul 20 '13 at 05:17

@kdjernigan any chance you could accept the answer then? i'm trying to get enough rep to comment, and i think my answer achieves the same effect – Sterling Camden Jul 20 '13 at 05:22

@kdjernigan and you're right of course, if you have anchor styling that affects color on hover it could override styling on the lis because it would be the more specific selector to the anchor tag – Sterling Camden Jul 20 '13 at 17:58

also just to be clear on pallandt's comment below, @kdjernigan's solution does not target the parent from the child, you were right that targeting a parent is impossible, the reason his solution (and mine) works is because we are both targeting the child and parent li at the same time and then overriding the other children back to their normal color, in his case he needed to repeat li li:hover likely to make the selector more specific and override his anchor styling, but for the general example provided in the question it's not strictly necessary. just in case you were curious – Sterling Camden Jul 20 '13 at 18:02

kdjernigan · Accepted Answer · 2013-07-20T05:10:24.590

0

After playing with code a little, I was able to finally find the solution I was looking for. I am pasting the solution below in code and a link to JS fiddle.

HTML

<ul>
<li>LINK 1</li>
<li>LINK 2</li>
<li>LINK 3
   <ul>
   <li>link 3.1</li>
   <li>link 3.2</li>
   </ul>
</li>
</ul>

CSS:

li:hover { color: red; }
li:hover li { color: black; }
li li:hover { color: red; }

JS Fiddle: http://jsfiddle.net/Nz5Gq/1/

edited Jul 20 '13 at 05:10

answered Jul 20 '13 at 05:04

kdjernigan

407
2
6
22

This seems like a stupid question now that I'm looking at it; however, the reason it wasn't working for me in the first place is because I have links inside my `
` tag and used those links to modify color. So the code on my page ended up being like this: `li:hover a { color: red; } li:hover li a { color: white; } li:hover li a:hover { color: red; }`

kdjernigan

Jul 20 '13 at 05:12

score 0 · Answer 4 · answered Jul 20 '13 at 06:38

0

li:hover
{
color:blue;
cursor:pointer;
}
li:hover li
{
color:Red;
}
li ul li:hover
{
color:Red;
cursor:pointer;
}

answered Jul 20 '13 at 06:38

Ankit Jain

1,106
1
9
17

Using CSS, how do I change the font color of parent tag if child tag is hovered over

4 Answers4

Using CSS, how do I change the font color of parent
tag if child
tag is hovered over