CSS - nth-child conditions appearing on wrong elements - html

Question

The goal is a rounded side nav with hover effects in CSS. I'm using nth-child to control border radius for the top and bottom. As you will see on the fiddle, when you hover over the elements in between the 1st and 4th child, you get the radius settings of nth-child(1). Why?
I'm using this markup:
http://jsfiddle.net/hKxt9/
HTML
<ul id="side-nav">
<li class="side-nav-item clients" id="link_clients">Clients</li>
<li class="side-nav-item rtemplates" id="link_routine_templates">Routines</li>
<li class="side-nav-item exlib" id="link_exercise_library">Exercise Library</li>
<li class="side-nav-item logout" id="link_log_out">Log Out</li>
</ul>
CSS
#side-nav{
border: 1px solid #D5D5D5;
border-radius: 10px;
padding: 0px !important;
list-style-type: none;
}
.side-nav-item{
padding: 10px;
border-bottom: 1px solid #D5D5D5;
border-radius: 0;
margin: 0px !important;
font-size: 16px;
font-weight: bold;
}
.side-nav-item a{
color: #808080;
}
.side-nav-item:hover{
background: #D5D5D5;
}
.side-nav-item.active{
background: #01bbea;
}
.side-nav-item.active {
color: #fff;;
}
.side-nav-item:nth-child(4){
border-bottom: 0px solid black;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.side-nav-item:nth-child(1){
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom: 1px solid #D5D5D5;
}

Answer 1

First of all it is wrong to have anchors as child nodes of a list. You structure should look like ul>li>a.
On the other hand nth-child() works for elements, not for class selectors. And even not being so, your elements with .side-nav-item class are always the first element of its father, which are always the anchor. So if nth-child() would work for classes (which is not the case) then your code wouldn't work anyway.
So if you change your structure to this:
<ul>
<li></li>
<li></li>
<li></li>
</ul>
Which is valid HTML, then you can do what you are looking for in this way:
li:nth-child(1) a {
/* your stylings */
}