I have an organized list with links, but when I add a link that requires a specific ID, the CSS is not applied to it.
Since the CSS only targets li a:link{}, how can I make it recognize the specified ID too?
The ID 'swishLink' is used in multiple places on the site, so altering its attributes isn't possible.
I've attempted using the <div id=""> option, but that would mean creating 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;
}
li a:hover {
text-decoration: none;
background: green;
color: white;
} <ul>
<li>
<a href="./"> One </a>
</li>
<li>
<a id='swishyLink'> Two </a>
</li>
<li>
<a href="./"> Three </a>
</li>
<li>
<a href="./"> Four </a>
</li>
<li>
<a href="./"> five </a>
</li>
</ul>