Targeting nested list

Hi all,

I have the following css selector:

nav ul ul li#level2:hover a:after{
	content:"»";
	float: right;
}

The above is correct as I’ve targetted the li element that needs to have the content inserted but that li also has a nested ul and its own children li elements which don’t need to have the content, so I was just wondering if anyone could tell me how to target the nested li’s and remove the content. I tried the following but it didn’t work:

nav ul ul li ul li:hover a:after{
	content:"";
}

Would really be grateful for any help.

Add the child selector between #level2:hover and a:


nav ul ul li#level2:hover [color=blue]>[/color] a:after{
content:"»";
float: right;
}

You should not need additional code to remove the content from the nested list.

Without the child selector, the “a” targets all “a” below #level2. Because #level2 is an ID, it carries a lot of weight. Read about specificity to learn more.

You can do it without the ID at all by using child selectors:

nav [COLOR="#FF0000"]>[/COLOR] ul [COLOR="#FF0000"]>[/COLOR] li [COLOR="#FF0000"]>[/COLOR] ul [COLOR="#FF0000"]>[/COLOR] li:hover [COLOR="#FF0000"]>[/COLOR] a:after{
content:"»";
float: right;
}

If you want to stick with the ID, place it on the UL (as you can only use it once) and do something like this:

#level2 > li:hover > a:after{
content:"»";
float: right;
color: white;
}

Thanks for the replies,

Sorry I think I may have been confusing. The following is the list:

<li  id="level2"><a href="#">Conditions</a>
  <ul>
    <li  ><a href="/conditions/skin">Psoriasis/Ezcema/Skin</a></li>
    <li  ><a href="/conditions/emotional">Anxiety Conditions</a></li>
    <li  ><a href="/conditions/ibs">Digestive Illnesses</a></li>
    <li  ><a href="/conditions/allergies">Allergies</a></li>
    <li  ><a href="/conditions/pregnancy">Pregnancy</a></li>
  </ul>
</li>

I kept the content in the li#level2 with this:

nav ul ul li#level2:hover a:after{
content:“»”;
float: right;
}

But I’m trying to remove the content from the nested list:

  <ul>
    <li  ><a href="/conditions/skin">Psoriasis/Ezcema/Skin</a></li>
    <li  ><a href="/conditions/emotional">Anxiety Conditions</a></li>
    <li  ><a href="/conditions/ibs">Digestive Illnesses</a></li>
    <li  ><a href="/conditions/allergies">Allergies</a></li>
    <li  ><a href="/conditions/pregnancy">Pregnancy</a></li>
  </ul>

From what I could see, the css I was given targets the outer list not the inner one. Any possibility for some clarification?

Thanks again.

Hi,

Both the above replies have given you what you asked for.


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>

nav ul ul li#level2:hover > a:after{
content:"»";
float: right;
}

</style>
</head>

<body>
<nav>
		<ul>
				<li>
						<ul>
								<li id="level2"><a href="#">Conditions</a>
										<ul>
												<li ><a href="/conditions/skin">Psoriasis/Ezcema/Skin</a></li>
												<li ><a href="/conditions/emotional">Anxiety Conditions</a></li>
												<li ><a href="/conditions/ibs">Digestive Illnesses</a></li>
												<li ><a href="/conditions/allergies">Allergies</a></li>
												<li ><a href="/conditions/pregnancy">Pregnancy</a></li>
										</ul>
								</li>
						</ul>
				</li>
		</ul>
</nav>
</body>
</html>

If that’s not what you meant then you may need to explain what’s wrong with the above demo and then we can take it from there :slight_smile:

Sorry about that. I just checked the code again and you’re right - it works exactly as I wanted. I need to slow down a bit. Thanks so much again to everyone.