how to change li last anchor color

Question

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

Did you try `.last a {color:black;}`? – Vucko Apr 24 '13 at 08:44 — Vucko, Apr 24 '13 at 08:44
Your welcome. Will upload an answer. – Vucko Apr 24 '13 at 08:55 — Vucko, Apr 24 '13 at 08:55

score 1 · Accepted Answer · answered Apr 24 '13 at 08:59

1

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

answered Apr 24 '13 at 08:59

Vucko

20,555
10
56
107

score 1 · Answer 2 · answered Apr 24 '13 at 09:03

1

Following css will fix the issue,

.last a{
    color:Black;
}

http://jsfiddle.net/tUuzn/

answered Apr 24 '13 at 09:03

Chamika Sandamal

23,565
5
63
86

score 0 · Answer 3 · answered Apr 24 '13 at 08:42

Why don't you create a selected css class and add that class to the last breadcrumb using jquery when the page is loaded?

.selected a { color: black; }

<script type="text/javascript">
    $(function () {
        $("li.last", $("#breadCrumb").addClass("selected");
    });
</script>

score 0 · Answer 4 · answered Apr 24 '13 at 08:45

0

Use the :last-child selector

li:last-child
{
 color:Black !important;
}

answered Apr 24 '13 at 08:45

Jude Duran

2,195
2
25
41

score 0 · Answer 5 · answered Apr 24 '13 at 09:33

0

li.last a{color : black;}
li:last-child a{color : black;}

answered Apr 24 '13 at 09:33

Jurijs Nesterovs

245
2
7

how to change li last anchor color

5 Answers5