Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Using :not to remove formatting

Using :not to remove formatting

Problem

I have a class rightband, which is inside of a message class. Sometimes, the parent

has an id subnote, sometimes - not. The code is below:

In my CSS, for particular reasons I need to have the child class rightband formatted to change on hover and not the parent class.

#img-up, #img-down {
    display: none;
}
#subnode .rightband:hover #img-up {
    display: block;
}
:not(#subnode) .rightband:hover #img-down {
    display: block;
}

On .rightband:hover I need to show the #img-up when there is an id="subnode" in the parent and show #img-down when the parent does not have the subnode.

Can this be done in CSS and how?

Problem courtesy of: Miro J.

Solution

Try something like:

#img-up, #img-down {
    display: none; 
}
.rightband:hover #img-down {
    display: block;
}
.rightband:hover #img-up {
    display: none;
}

#subnode .rightband:hover #img-up {
    display: block;
}    
#subnode .rightband:hover #img-down {
    display: none;
}
Solution courtesy of: Floremin

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Using :not to remove formatting

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×