Styling the last <li> <a> - html

Question

I stucked at this part. I have a menu in HTML like this:
<nav>
<ul>
<li>Home</li>
<li>Item1
<ul>
<li>Item1_1</li>
<li>Item1_1</li>
<li>Item1_1</li>
<li>Item1_1</li>
<li><a id="last" href="#">Last</a></li>
</ul>
</li>
</ul>
</nav>
The CSS is this:
nav {
margin-left: auto;
margin-right: auto;
width: 100%;
}
nav ul ul li a #last {
border-bottom-left-radius: 1em;
border-bottom-right-radius: 1em;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: linear-gradient(top, #ffffff 0%, #ffffff 100%);
background: -moz-linear-gradient(top, #fffff 0%, #fffff 100%);
background: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 100%);
padding: 0px;
list-style: none;
position: relative;
display: inline-table;
width: 100%;
text-align: center;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
nav ul li {
width: 20%;
float: left;
text-align: center;
}
nav ul li:hover {
border-top-left-radius: 1em;
border-top-right-radius: 1em;
background: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
font-family: Arial,Helvetica,sans-serif;
font-size: 0.9em;
font-weight: bold;
display: block;
padding: 0.9em;
color: #000000;
text-decoration: none;
}
nav ul ul {
width: 20%;
background: #5f6975;
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li {
font-family: Arial,Helvetica,sans-serif;
float: none;
width: 100%;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {
font-family: Arial,Helvetica,sans-serif;
font-size: 0.7em;
width: 89%;
padding: 15px 10px;
}
nav ul ul li a:hover {
background: #4b545f;
}
As You can see there is an id="last" for the last item at the list, because I want to this item have a rounderd bottom border (left and right side aswell). But I have no idea why its not working :(. Its my first post so sorry for my english, and for the long post aswell :) Plase help me, thank You!

Answer 1

For id you need to make css like this:
nav ul ul li a#last
noticed the difference? the #last is combined with the a.

Answer 2

Since #last is unique, all you need is:
#last {
...your css..
}

Answer 3

a #last means "the element with the ID of "last" that is a child of an <a> tag.
You don't need the space there. a#last means "an <a> tag with the ID of "last".
Actually, since IDs are supposed to be unique, you can just use #last, without the a (or even the rest of the elements before it).