:last-child styling not working

[tua33450]

Hi, I am trying to remove the top border fro the first and the bottom border for the last list item in a series. Only one of these is working and I cannot figure out the problem. I am using Firefox and Chrome to view these, by the way.

Here is the html:

<section class="tabmain">
	<ul id="categories">
		<li><a href="#">Categories 1<a></li>
		<li><a href="#">Categories 2<a></li>
		<li><a href="#">Categories 3<a></li>
	</ul>
	<ul id="comments">
		<li><a href="#">Comments 1<a></li>
		<li><a href="#">Comments 2<a></li>
		<li><a href="#">Comments 3<a></li>
	</ul>
	<ul id="archives">
		<li><a href="#">Archive 1<a></li>
		<li><a href="#">Archive 2<a></li>
		<li><a href="#">Archive 3<a></li>
	</ul>
</section>

Here is the css:

#categories li:last-child {
	border-bottom: none;
}
#categories li:first-child {
	border-top: none;
	padding-top: 10px;
}
#comments li:last-child {
	border-bottom: none;
}
#comments li:first-child {
	border-top: none;
	padding-top: 10px;
}
#archives li:last-child {
	border-bottom: none;
}
#archives li:first-child {
	border-top: none;
	padding-top: 10px;
}

From the above code, the only part that works is the first-child part of the #categories id. I am sure that I have made some sort of typo or something, but I can't seem to figure it out. I would appreciate any help.

[Snookerman]

Close your <a> tags

Edit: By the way, this would accomplish the same thing:

.tabmain li:last-child {
    border-bottom: none;
}
.tabmain li:first-child {
    border-top: none;
    padding-top: 10px;
}

[tua33450]

Thanks so much! I knew it would be a stupid mistake. And thanks for the simplified code, I'll definitely use that instead.