Pseudo-class inside :not

Question

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

Example:

li:not(.inner:hover):hover { // Code }

<li>
   <div class="inner"></div>
</li>

I am trying to cancel out the effect of the parent hover, when I hover an inner item, without using javascript.

The expected result for above code is when you hover the li, but not the inner div, the li get's a hover effect. But only if you're not hovering the .inner.

Update

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

Answer 1

Yes, but you're using both a class and a pseudo-class, which is invalid:

li:not(.inner:hover):hover

Even if you change it to something that's valid (as per this answer):

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

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

Lastly, if you want to change the li when .inner gets a hover, that's not possible with current CSS selectors. You'll need JavaScript.

Answer 2

You can use the simple css instead 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/