View Full Version : CSS :hover

Jan 25th, 2007, 10:33 AM
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?

Jan 25th, 2007, 11:59 AM
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.

Jan 25th, 2007, 12:02 PM
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