SitePoint Sponsor

User Tag List

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

    First-child selector not matching intended element?

    I'm sure there's a simple mistake I'm making in the css below, but I'm trying to target anchor element of the first-child of the ul element and apply formatting to it.

    Can someone tell me what I'm doing wrong in the css first-child selector?

    Code:
    <div class="footer">
    	<div class="menu">
    		<ul>
    			<li><a href="#">First Child Link</a></li>
    			<li><a href="#">About Us</a></li>
    		</ul>
    	</div>
    </div>
    
    
    .footer ul li {display:inline-block; }
    .footer .menu ul li a {display:block; float:left; padding:0 10px;border-left:1px solid #ccc;}
    .footer .menu ul li:first-child a {padding-right:0 !important; border:none !important;}

  2. #2
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Remove the !importants as not only are they unnecessary (your new code is both more specific AND comes later) but potentially confuse you.

    First test your first-child on the child itself:

    .footer ul li:first-child {background-color: #00f; overflow: hidden;}

    (added the overflow because the anchors are floated)

    Other than the fact that you might have more HTML markup than necessary, you seem to be using first-child properly.
    When testing it, though, for now try to keep the same format as you used for regular a's
    padding: 0 10px 0 0; border-right: 0;
    just because if you're testing out a feature you want to know if you've used the feature correctly... which is easiest if, for now, everything else is the same.

  3. #3
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Update: I had a malformed anchor tag upstream from the footer menu. Correcting it has resolved the problem. Thanks for your help.

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,816
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    i think you what you wanted to do was this:

    .footer ul li {display:inline-block; }
    .footer .menu ul li a {display:block; float:left; padding:0 10px;border-left:1px solid #ccc;}
    .footer .menu ul li:first-child a {padding-left:0 ;border:none }


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
  •