CODEWITHSUNDEEP
htmlcss
RainerS
RainerS

Reputation: 521

Set a hover class on a element if a parent element does not have class xy

with

".edtr_element:not(.edtr_active_container):hover {..."

I can make a style if a element class does not have the (class).

Now I have the situation, that I have to check if a element which is with the mouse hover, is in a div which does not have a class xy.

Example

<div id="mydiv1" class="divclass1">
  <div id="mydiv2" class="divclass2"></div>
</div>

How can I set a CSS :hover class if I am over the div2 but in div 1 is not the class "divclass1"?

Is it possible only by CSS?

Upvotes: 2

Views: 204

Answers (2)

Sebastian Brosch
Sebastian Brosch

Reputation: 43594

You can use something like the following:

div:not(.divclass1) > div:hover {
  color:red;
}
<div id="mydiv1" class="divclass1">
  <div id="mydiv2" class="divclass2">
    Test
  </div>
</div>

<div id="mydiv3" class="divclass2">
  <div id="mydiv4" class="divclass2">
    Test
  </div>
</div>

Upvotes: 3

Matthias S.
Matthias S.

Reputation: 171

Your selector would probably look like this: *:not(.divclass1) > .divclass2:hover {...}

*:not(.divclass1) selects every element that is not "divclass1" > .divclass2 selects every direct child that has "divclass2" and :hover obviously defines the hover styles for this element.

Hope this helps

Upvotes: 1

Related Questions