Horiz nav list with left border og last three only?

hi all :slight_smile:

(sorry headline should say ON last three…)

i have a horizontal nav list across the top of a site wherein some items are links and some are not. each item has a 1 pixel solid green left border. i do not want the border on the first two items but everything i have tried is ineffective.

here is the latest version of my css:

#headerNav ul
{
padding: 0;
margin: 0;
color: #777;
float: left;
width: 100%;
font-size: .7em;
}

#headerNavContainer ul li { display: inline;}

#headerNavContainer ul li a
{
margin: 1px 5px;
padding: 0 .15em 0 .5em;
color: #777;
text-decoration: none;
float: left;
width: 107px;
border-left: 1px solid green;
height: 17px; 
}

#headerNavContainer ul li a:hover
{
background-color: #369;
color: #fff;
}

.noLeft {
border-left:1px solid white;
}

and the html:

<div id="headerNavContainer">
<ul id="navlist">
<li class="noLeft"><a href="mailto:mail link">name</a></li>
<li class="noLeft">(empty item)</li>
<li><a href="#" class="active">about</a></li>
<li><a href="resume.pdf">Download CV</a></li>
<li><a href="link"><img src="linkImage.gif" width="80" height="15" border="0" alt="link alt" style="margin-bottom:-3px;" /></a></li>
<li><a href="#">+1 123-456-7890</a></li>
</ul>
</div> <!-- end headerNavContainer -->

also, instruction on how to make the list function as some links, some not and still look the same are appreciated.

advance thanks!

.noLeft a {
border-left:0;
}

will do it

You might need more specificity then that from the looks of it (I’m too lazy to calculate it lol)

Try this :slight_smile:

#headerNavContainer ul li.noLeft a{border-left:0;}

Opps - true.

thanks again, you guys rock!