Pseudo-class inside: no

Question

Is it possible to use a pseudo-class inside a tag: not tag?

Example:

li:not(.inner:hover):hover { // Code } <li> <div class="inner"></div> </li> 

I am trying to hide the effect of parental hovering when I find the inner element without using javascript.

The expected result for the above code is when you hover li, but not the inner div, li gets a hover effect. But only if you do not hang .inner.

Update

http://jsfiddle.net/eTV86/ What I want when black turns black, li goes back to red.

Answer 1

Yes, but you are using both a class and a pseudo-class, which is not valid:

 li:not(.inner:hover):hover 

Even if you change it to what is really (according to this answer ):

 li:not(.inner):hover, li:not(:hover):hover 

The first selector will always match your li on hover, and the second selector will never match anything. It will never match your div.inner because you are attaching :not() to li .

Finally, if you want to change li when .inner gets stuck, this is not possible with current CSS selectors. You will need JavaScript.

Answer 2

You can use plain css instead of pseudo class

HTML

 <ul> <li class="active"><a href = "#">Link 1</a></li> <li><a href = "#">Link 2</a></li> <li><a href = "#">Link 3</a></li> </ul> 

CSS

 ul li a{ color:black} ul li a:hover { color:red } ul li.active a:hover { color:black /*re use the same properties which is there in default style viz ul li a{} */} 

DEMO http://jsfiddle.net/mKQas/2/