SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Only apply style to the descendents of the first-child of named element?

    I've got a nested unordered list in which I want to isolate some css rules so that they only apply to hyperlinked elements that are direct descendents of the parent UL element.

    I don't want any of these rules to apply to anchors that are descendent elements.

    For example, my markup is:

    HTML Code:
    <div class="menu nav">
    	<ul class="menu">
    		<li class="menu-item"><a href="#">Home</a></li> 
    		<li class="menu-item"><a href="contact-us">Contact Us</a></li> 
    		<li class="menu-item"><a href="about-us">About Us</a> 
    			<ul class="sub-menu"> 
    				<li class="menu-item"><a href="privacy-policy">Privacy Policy</a></li> 
    				<li class="menu-item"><a href="ftc-disclaimer">FTC “Disclaimer”</a></li> 
    			</ul> 
    		</li> 
    	</ul> 
    </div> 
    I only want the rules applied to the "Home", Contact Us, and "About Us" elements.

    Here's what I've tried, what am I missing?

    .menu.nav ul.menu:first-child li a {//rules here}

  2. #2
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    Arnhem, The Netherlands
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What you did is target every anchor in <ul class="menu">. What you should do to target only the direct children of this ul:
    Code CSS:
    ul#menu>li a

    A great explanation of how this works: The Child Selector

  3. #3
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,606
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)
    It looks like you've already set things up pretty close to that already.

    Try using

    Code:
    div.nav li.menu-item a { /*stuff*/ }
    And then for the sub menu items, indicate that in the classes. Instead of "menu-item", use "sub-menu-item".
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  4. #4
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    Arnhem, The Netherlands
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oops! I should have thought about this a minute longer With my method you also target the second level anchors. Force Flow's method should work.

  5. #5
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    Arnhem, The Netherlands
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hm... Some more thinking gave me this:
    Code CSS:
    ul#menu>li>a
    or this:
    Code CSS:
    ul#menu>li a:first-child

    Maybe I should go to bed

  6. #6
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,882
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Hueij View Post
    Hm... Some more thinking gave me this:
    Code CSS:
    ul#menu>li>a
    or this:
    Code CSS:
    ul#menu>li a:first-child

    Maybe I should go to bed
    The first one should work, the second one won't, because it will still target the first <a> in each sub-menu list item.

  7. #7
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,606
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)
    I tend to avoid the :first-child selector unless really necessary. It's not supported very well in IE.
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain


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
  •