li
elements are use used to create breadcrumb in shopping cart.
Breadcrumb shows all anchor elements using style defined for a element from site.css
How to make last anchor color black?
I tried style below. back color appears only if mouse is over element. how to make link text black also if mouse is not over it ?
jquery jBreadCrumb from http://www.comparenetworks.com/developers/jqueryplugins/jbreadcrumb.html is used to convert list to breadcrumb. jquery, jquery-ui, ASP.NET MVC2 are 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">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 problem persists. Below is contents from FireBug Sytle tab.
For unknow reasonblack colo appear only if mouse is hover last anchor text.
How to make last anchor text black always ?
.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;
}
To change the color of the anchor in the last list-item , use :
.last a{
color:black;
}
This would also work, using the :last-child selector:
li:last-child a{
color:black;
}