Don't show image on last child in ul

HTML & CSS
1

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

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:


#right ul#nav li[COLOR="#FF0000"]:last-child[/COLOR] 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

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

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. :slight_smile: