SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2008
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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.

    HTML Code:
    <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>
    				<ul>
    					<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.

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code CSS:
    #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.
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Zealot
    Join Date
    Aug 2008
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Code:
    .AspNet-Menu-WithChildren .AspNet-Menu-Leaf a:hover {
    background: #598033 !important;
    }
    Thanks again!

  4. #4
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!
    Birnam wood is come to Dunsinane

  5. #5
    SitePoint Zealot
    Join Date
    Aug 2008
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    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.

  6. #6
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That style sheet is a mess!
    There are a whole bunch of selectors targeting those links, but if you do something like this you can override it:
    Code CSS:
    #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.
    Birnam wood is come to Dunsinane

  7. #7
    SitePoint Zealot
    Join Date
    Aug 2008
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •