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>