Using border-right separator between anchors, but remove from last-child?

HTML & CSS
1

I’m applying a border-right attribute to each anchor in the markup below and I’m trying to use .last-child to remove the border from the last element of the first generation anchors only. However, my index must be off as its removing borders other than the one I want…

<div class="menu nav">
	<ul class="menu">
		<li class="menu-item"><a href="#">Home</a></li> 
		<li class="menu-item"><a href="#">Contact Us</a> 
			<ul class="sub-menu"> 
				<li class="menu-item"><a href="#">Directions</a></li> 
			</ul> 
		</li> 
		<li class="menu-item"><a href="#">About Us</a></li> 
	</ul>
</div>

.menu.nav ul li a {display:block;  padding:0 20px; margin:10px 0; line-height:35px; text-decoration:none; border-right:1px solid #ccc;}

.menu.nav ul li a:last-child {border:none;}
2

Just class it then it works everywhere. That’s better for now.

3

You need this:


.menu.nav ul li a {
    display:block;
    padding:0 20px;
    margin:10px 0;
    line-height:35px;
    text-decoration:none;
    border-right:1px solid #ccc;
}
[B]ul.menu>li:last-child a {
    border:none;
}[/B]
4

What Paul says.

As you’ve seen, he uses an extra ul prefix, because you use the same class on two different tags, even more, on a parent and one of its children: menu.

You should avoid this type of thing and you should probably be doing this:


<div class="nav">
	<ul class="menu">
		<li class="menu-item"><a href="#">Home</a></li> 
		<li class="menu-item"><a href="#">Contact Us</a> 
			<ul class="sub-menu"> 
				<li class="menu-item"><a href="#">Directions</a></li> 
			</ul> 
		</li> 
		<li class="menu-item"><a href="#">About Us</a></li> 
	</ul>
</div>

if the div is a must.