Combining two selectors in CSS3

Question

Is there anyway to combine two selectors? such as:

#div:hover:not(.class)

Thanks

Joel

---

Edit:

I understand this work as I wrote. 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?

Thanks!

Joel

Answer 1

Update:

If you only want to have the hover effect not applying to Bye, then you can just create an extra hover rule for that and set the color explicitly (as other answers showed).

If the hover effect should not apply to the whole li element, then I think there is no way to do it. You needed some kind of parent selector, which does not exist in CSS.

---

Yes and it is fairly easy to try: http://jsfiddle.net/5vaUW/

(probably only works if your browser supports CSS3)

You might want to read more about CSS3 selectors, where you can find this:

A selector is a chain of one or more sequences of simple selectors separated by combinators. One pseudo-element may be appended to the last sequence of simple selectors in a selector.

A sequence of simple selectors is a chain of simple selectors that are not separated by a combinator. It always begins with a type selector or a universal selector. No other type selector or universal selector is allowed in the sequence.

A simple selector is either a type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class.

Answer 2

In css2, would be:

li:hover{ color:#CCC; }
li:hover div{
 color: #000;   
}

For CSS3, I agree with Felix Kling.

Answer 3

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.