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.

Do you have some representative HTML that we could experiment with? And could you explain *exactly* what you're trying to do? — David Thomas, Oct 11 '12 at 07:38
I am confused ... Can you show what you're trying to do exactly? — Ahmad Alfy, Oct 11 '12 at 07:38
I think you should mimic the same effect on the hover with CSS instead of using `:not` ... just re-declare it — Ahmad Alfy, Oct 11 '12 at 07:39

score 2 · Accepted Answer · edited May 23 '17 at 12:04

2

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.

edited May 23 '17 at 12:04

Community

1
1

answered Oct 11 '12 at 07:53

BoltClock

700,868
160
1,392
1,356

So I can't tell if the child's hover is active inside a :not? – Kao Oct 11 '12 at 07:55
You can't, because `:not()` only looks at whatever element you attach it to, not its children. And since there's still no parent selector, you can't do it with CSS currently. – BoltClock Oct 11 '12 at 07:58

Sowmya · Answer 2 · 2012-10-11T07:50:02.833

0

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/

edited Oct 11 '12 at 07:50

answered Oct 11 '12 at 07:41

Sowmya

26,684
21
96
136

I don't understand, how does this cancel out the hover of li, if you mouse over the ? – Kao Oct 11 '12 at 07:56

Pseudo-class inside :not

2 Answers2

Linked