CSS :hover

I'm working on a php/AJAX script thats pulls information into the current page into a div with id="results". I have the following CSS:
#results {
padding: 5px;
}
div#results div {
padding: 5px;
}
div#results div span {
float: right;
font-weight: normal;
}
div#results div:hover {
background-color: #ededed;
}

My problem is that the very last div I have within the results div is not supposed to have a hover effect. Is there a way I can easily do this w/o having to make the code twice as long?

Create a class for it too? Add this after the hover state you have there:


div#results .thisone div:hover {
(style in here)
}


Then put your class within the last id.

Funny, I've never used that pseudo class because I always thought it wouldn't work/exist... very strange. Well, haven't tried it but try this:

#results div:last-child:hover {background-color: [whatever the default color is];}


Ah now I see... doesn't work properly in all browsers... again! That's why I never used it. http://www.quirksmode.org/css/firstchild.html