Question

I understand #div:hover:not(.class) works. However, how can I achieve a "hover" effect for a "LI" element , but exclude the hover effect when the mouse is over a certain "DIV’ inside the LI?

E.G.

<li>Hello   <div id="#no-hover">Bye</div>  </li>

I would like to get a hover effect for the li:

li:hover{ text-color:#CCC; }

but somehow exclude the hover effect when the mouse is over the #no-hover div.

Any ideas?

Answer 1

Based on your question edit, to maximize browser compatibility (I mean, why not if you can?) you can get away with not using CSS3 selectors at all. Try this, assuming black is the default text color:

li, li:hover div#no-hover {
    color: #000;
}

li:hover {
    color: #ccc;
}

Although you may want to use a class instead of an ID if you want to affect multiple elements with a no-hover classification. In which case you would do this instead for your first rule:

li, li:hover div.no-hover {

Either way, since selecting a descendant with its ancestor is more specific than selecting just the ancestor, assuming the same combinators on the ancestor it’ll override the second rule even though that one comes later.