a id= as aposed to a href= - css

Question

I've a nicely layed out unlisted list with links using <a href="">, but when I add one link that requires <a id=""> the CSS ignores it.
As CSS only defines the attributes using li a:link{}, how do I get it to recognise the the id= too?
The id=swishLink is used a number of times throughout the site, so I cant really make any changes to swishyLink attributes.
I've tried the <div id=> option, but it means I have to create a CSS rule for each list item.
li:first-child a:link{
text-decoration: none;
border-top-right-radius: 2em;
border-top-left-radius: 2em;
}
li{
list-style-type: none;
text-decoration: none;
border: 2px solid white
}
li a:link{
text-decoration: none;
list-style-type: none;
width: 200px;
height:auto;
padding: 20px;
display: list-item;
background: #eefbe7;
font-family: Arial Rounded MT Bold,Helvetica Rounded,Arial,sans-serif;
text-align: center;
color: green;
}
li a:visited{
color: green;
}
li a:active{
color:purple;
}
li:last-child a:link{
border-bottom-right-radius: 2em;
border-bottom-left-radius: 2em;
}
/*
Change the link color on hover */
li a:hover {
text-decoration: none;
background: green;
color: white;
}
<ul>
<li>
One
</li>
<li>
<a id='swishyLink'> Two </a>
</li>
<li>
Three
</li>
<li>
Four
</li>
<li>
five
</li>
</ul>

Answer 1

If you want your CSS to also apply to <a> tags that aren't links, you shouldn't tell it to only apply to links.
It sounds like you don't want :link.

Answer 2

a:link is backfiring on you. Just use li a
li:first-child a{
text-decoration: none;
border-top-right-radius: 2em;
border-top-left-radius: 2em;
}
li{
list-style-type: none;
text-decoration: none;
border: 2px solid white
}
li a{
text-decoration: none;
list-style-type: none;
width: 200px;
height:auto;
padding: 20px;
display: list-item;
background: #eefbe7;
font-family: Arial Rounded MT Bold,Helvetica Rounded,Arial,sans-serif;
text-align: center;
color: green;
}
li a:visited{
color: green;
}
li a:active{
color:purple;
}
li:last-child a{
border-bottom-right-radius: 2em;
border-bottom-left-radius: 2em;
}
/*
Change the link color on hover */
li a:hover {
text-decoration: none;
background: green;
color: white;
}
<ul>
<li>
One
</li>
<li>
<a id='swishyLink'> Two </a>
</li>
<li>
Three
</li>
<li>
Four
</li>
<li>
five
</li>
</ul>