Search code examples
jqueryhtmlcssbreadcrumbs

how to change li last anchor color


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;
}

Solution

  • 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;
    }