My current challenge involves customizing the color of links within the <li> elements by applying specific classes to the <li> tag. The structure of my HTML is as follows:
<div id="sidebar_tall">
<ul>
<li class="active_item"><a href="#">1. Property Description</a></li>
<li><a href="#">2. Landlord Details</a></li>
</ul>
</div>
This is the CSS code being used:
#sidebar_tall li {
list-style: none;
font-size: 14px;
}
#sidebar_tall a {
text-decoration: none;
color: #fff;
text-shadow: 0px 1px #000;
}
.active_item li {
border-top: none;
border-bottom: none;
width: 250px;
}
.active_item a{
color: #1e1f1f;
text-shadow: 0px 1px #fff;
}
Despite my efforts, I am unable to alter the color of the active_item link. I am aware that directly applying the class to the <a> tag would solve the issue, but I am required to assign it to the <li> tag for this particular website. Any insights on why this approach is not yielding the desired results?