li elements are utilized to create breadcrumb in a shopping cart.
The breadcrumb displays all anchor elements using the style defined for an 'a' element from site.css.
How can I make the last anchor's color black?
I attempted the style below. The background color only appears when the mouse is over the element. How do I make the link text black even when the mouse is not hovering over it?
The jquery jBreadCrumb from is used to convert the list into a breadcrumb. jQuery, jQuery-UI, and ASP.NET MVC2 are also being used.
HTML:
<div id="breadCrumb" class="breadCrumb module">
<div style="overflow:hidden; position:relative; width: 990px;">
<div>
<ul style="width: 5000px;">
<li class="first">
<a href="/"></a>
</li>
<li>
<a href="/Store/Category?category=1">Level1</a>
</li>
<li>
<a href="/Store/Category?category=28">level2</a>
</li>
<li class="last">
<a href="/Store/Browse?category=37521"
style="color:black">level3shouldbeblack</a>
</li>
</ul>
</div>
</div>
</div>
CSS:
.breadCrumb ul li.last, .last, .last:hover, .last:link, .last:visited,
.last:active {
color:Black !important;
}
Update
I added li:last-child, but the problem still persists. Below is the content from the FireBug Style tab.
For some unknown reason, the black color only appears when the mouse hovers over the last anchor text.
How can I make sure the last anchor text is always black?
.breadCrumb ul li a {
display: block;
float: left;
height: 21px;
line-height: 21px;
overflow: hidden;
position: relative;
}
a:link, a:visited {
text-decoration: none;
}
.breadCrumb ul li.last, .last, .last:hover, .last:link, .last:visited, .last:active {
color: Black !important;
}
.breadCrumb ul li {
font-size: 0.9167em;
line-height: 21px;
}
li:last-child {
color: Black !important;
}
.breadCrumb ul li.last, .last, .last:hover, .last:link, .last:visited, .last:active {
color: Black !important;
}
body {
font-family: Helvetica,Arial,sans-serif;
}