I am currently attempting to modify the hover effects of my spans. Due to a specific requirement, I find myself needing to assign the same id's to all <li> elements that contain my spans. This results in all of the spans having the same parent id:
<li id="li_id">
<span><a href="/some/link.html">Link title</a></span>
</li>
<li id="li_id">
<span class="anotherlink"><a href="/another/link.html">Another Link title</a></span>
</li>
I have researched methods to override id's using classes, such as this one: Can I override a #id ul li behavior with a class definition , but I have been unsuccessful in making them work.
CSS:
#primary_nav #home li#li_id>span:hover {
background-image: url(this_image.png);
}
//This is for my first link
#primary_nav #home li#li_id .anotherlink >span:hover {
background-image:url(another_image.png);
}
//This is for the other link.
Am I using the correct syntax? The styles do not seem to apply correctly at the moment, and I am unsure about the CSS for the other link.
NOTE: I understand that this may seem unconventional, as typically classes should be used with different id's. However, I am working on an existing site and need to implement temporary solutions like this until a new site is deployed. Therefore, I just need to ensure that this site is updated until the replacement site is live.