SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    292
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Don't show image on last child in ul

    So, I'm trying to get that background image not to show at the end of the list. Here it what I've tried. You can view the site at.

    http://connect4webdesign.com/utahlibertylaw/

    #right ul#nav li a {
    color:#163d63;
    font-weight:bold;
    padding:0 15px;
    background:url(images/navsep.gif) right no-repeat;
    text-decoration:none;
    float:left;
    padding:10px 13px;
    text-align:center;
    }

    #right ul#nav li a:last-child {
    color:#163d63;
    font-weight:bold;
    padding:0 15px;
    text-decoration:none;
    float:left;
    padding:10px 13px;
    text-align:center;
    }

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,590
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    You are slightly missing the point of :last-child. The <a> is the only child of the li. What you want is to target the <a> inside the LI that is the last-child of the UL, like so:

    Code:
    #right ul#nav li:last-child a {
      background: none;
    }
    Another option would be to put a special class on the final <li> or <a> (such as "last") and target it that way, but that assumes you always know which link is th last in the menu.

  3. #3
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    292
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thx that did the trick. One interesting thing is that I had to declare "background:none" on the #right ul#nav li a:last-child for the image not to show up, but putting the child selector after the li was key. thx.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,590
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by BrianBam View Post
    I had to declare "background:none" on the #right ul#nav li a:last-child for the image not to show up
    Yes, that was missing from your original rule. In the previous rule you've set the background image on all <a>s, so you have to then remove from any that shouldn't have it. Not perfect, I guess, but it's not an ideal world.


Tags for this Thread

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
  •