change hover on last list item

[froggy]

Hi there,

I use css to do my rollover effects on my website.

I have a list and set the background images in the css to show active and hover states.

Am I able to set a different hover state (different image on hover) for the last item in the list?

Any help would be great.

:)



<ul id="help">
<li><a href="#">Get a quote online</a></li>
<li><a href="#">Get a quote online</a></li>
<li><a href="#" class="helplastitem">Get a quote online</a></li>
</ul>




ul#help li
{
position: relative;
height: 74px;
}
ul#help li a
{
position: absolute;
width: 269px;
height: 74px;
padding:0 0 0 30px;
background: url(../images/need-help-bg.png) no-repeat top left;
text-decoration: none;
}
#what-next .helplastitem
{
width:269px;
height:74px;
background:url(../images/help-last.png) no-repeat top left;
}
#support-help .bottomcurvehelp
{
width:260px;
height:4px;
margin-left:9px;
background:url(../images/help-bottom-curve.png) no-repeat top left;
}
ul#help li a:hover
{
background: url(../images/need-help-bg.png) no-repeat bottom left;
}

[Nile]

li:list-child a:hover

Usage:


<style type="text/css">
span:last-child {
color: green;
}
</style>
<span>HI</span>
<span>HI</span>
<span>HI</span>