Trying to remove a left border style from an a-element - html

Question

I have a navbar that is like so:
<ul>
<li>Home</li>
<li>Gallery</li>
<li>Testimonials</li>
<li>Services</li>
<li>Contact</li>
</ul>
And it has css like so:
.nav_bar {
margin: 0px 0px 0px 0px;
height:40px;
}
.nav_bar ul {
margin:0px;
padding:0;
list-style:none;
width:940px;
}
.nav_bar li {
margin: 0px 0px 0px 0px;
display:inline;
}
.nav_bar li a {
text-align:center;
border-left: 1px solid #fff;
text-decoration:none;
padding: 20px;
width:147px;
background:#000000;
color:#eee;
float:left;
}
As you can imagine, this puts a white line to the left of the elements, Which I want except for the first one. I tried adding:
Home
to the first li but it doesn't do anything, and in developer tools, it is crossed out with a orange triangle next to it. So, how would I accomplish the task at hand?
Thanks for your help.

Answer 1

You have a slight error in your border-left syntax, it should be:
Home
See this introduction to CSS shorthands for more info on the sort of syntax you should use.

Answer 2

Why not do
.nav_bar li a:first-child {
border-left: 1px solid #000;
}
Or if you don't want it at all
.nav_bar li a:first-child { border:none; }

Answer 3

From http://www.w3.org/TR/CSS2/selector.html#first-child:
The :first-child pseudo-class matches an element that is the first child element of some other element.
In the following example, the selector matches any P element that is the first child of a DIV element. The rule suppresses indentation for the first paragraph of a DIV:
div > p:first-child { text-indent: 0 }
This selector would match the P inside the DIV of the following fragment:
<P> The last P before the note.
<DIV class="note">
<P> The first P inside the note.
</DIV>
but would not match the second P in the following fragment:
<P> The last P before the note.
<DIV class="note">
<H2>Note</H2>
<P> The first P inside the note.
</DIV>