: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 ;)

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.