Trouble isolating nested selectors

Been doing doing this for a while now, but one thing that still gets me these days are how to handle nested selectors, especially if there are multi-levels of children.

I am currently working within a template system that allows us to override the template styles on our own stylesheet. In the nav area, I am trying to make the background color of the hover state for the second tier of a dropdown menu different than the parent element. This, I’m sure is very confusing without seeing an example, but take a look at the code below to see what I’m trying to isolate.

<div id="navigation-area">
	<div class="site-menu">
		<ul class="AspNet-Menu">
			<li class="AspNet-Menu-WithChildren">
				<a class="AspNet-Menu-Link">
					Search Rentals</a>
					<li class="Asp-Menu-Leaf">
						<a class="AspNet-Menu-link">
							Property List</a>

I would like to have the hover state for “Property List” have a different background color on hover than “Search Rentals”. I am having trouble isolating the Property List hover state in my CSS. What would be the correct selector string to isolate this? Thank you in advance.

Be careful about using !important directives, as they can lead to a maintenance nightmare. I’ve been using CSS for 10 years now, and I’ve only had to use !important once, and that was as a bug fix for Internet Explorer! :slight_smile:

#navigation-area .Asp-Menu-Leaf a.AspNet-Menu-Link:hover {

That ought to do it, unless there are other rules with a more specific selector that apply to the same elements.

Thanks. There’s a ton of specifics with the ids and classes – gets confusing.

I ended up fixing it like this, but I’m sure yours would have worked too.

.AspNet-Menu-WithChildren .AspNet-Menu-Leaf a:hover {
background: #598033 !important;

Thanks again!

Thanks for the advice. I tried using your suggestion, and a few other more specific selectors to no avail. You can take a look here if you’d like to try it out.

That style sheet is a mess! :eek:
There are a whole bunch of selectors targeting those links, but if you do something like this you can override it:

#navigation-area li:hover a,
#navigation-area li:hover span,
#navigation-area li.AspNet-Menu-Hover a,
#navigation-area li.AspNet-Menu-Hover span,
#navigation-area li:hover li:hover a,
#navigation-area li:hover li:hover span,
#navigation-area li.AspNet-Menu-Hover li.AspNet-Menu-Hover a,
#navigation-area li.AspNet-Menu-Hover li.AspNet-Menu-Hover span,
#navigation-area li:hover li:hover li:hover a,
#navigation-area li:hover li:hover li:hover span,
#navigation-area li.AspNet-Menu-Hover li.AspNet-Menu-Hover li.AspNet-Menu-Hover a,
#navigation-area li.AspNet-Menu-Hover li.AspNet-Menu-Hover li.AspNet-Menu-Hover span,
#navigation-area ul.AspNet-Menu li.AspNet-Menu-Leaf a:hover,
#navigation-area ul.AspNet-Menu li.AspNet-Menu-WithChildren a:hover
 {background-color:yellow; color:red}

It’s possible that some of those can be trimmed off, but it’s just too complex to delve into.

Tell me about it! Unfortunately, I don’t have any access to the markup as this is a custom templating system that we share with our partner. I’ll give it a try, but may just have to leave the !important until it causes any problems. Like you, I can count on one hand how many times I’ve ever used it, so hopefully it won’t cause any issues.