CODEWITHSUNDEEP
css
Jimothey
Jimothey

Reputation: 2434

CSS not() doesn't work as expected

I'm trying to understand why the following doesn't work. As far as I understand it shouldn't give me a box shadow if the form__group element is a child of .modal yet it does.

div:not(.modal) .form__group:hover {
    box-shadow: inset 10px 0 0 #ccc;
}

http://codepen.io/anon/pen/mJmddj

Upvotes: 1

Views: 147

Answers (3)

G.L.P
G.L.P

Reputation: 7217

You need to use modal__body / have to use not for modal like this: Demo

HTML:

<div class="modal">  
    <div class="form__group">
      Hover on me for the box shadow - it shouldn't be there
    </div>
  </div>


  <div class="modal__body">
    <div class="form__group">
      Hover on me for the box shadow - it shouldn't be there
    </div>
  </div>

CSS:

.modal:not>.form__group:hover {
  box-shadow: inset 10px 0 0 red;
} 
.modal__body>.form__group:hover {
  box-shadow: inset 10px 0 0 #ccc;
}

Upvotes: 1

Rushang Prajapati
Rushang Prajapati

Reputation: 596

"Selector form__group is never used This inspection detects unused CSS classes or IDs within a file. "

Upvotes: 0

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18133

Your HTML is:

<div class="modal">
  <div class="modal__body">
    <div class="form__group">
      Hover on me for the box shadow - it shouldn't be there
    </div>
  </div>
</div>

When you remove the modal div, you get:

  <div class="modal__body"> <!-- fits the "div:not(.modal)" -->
    <div class="form__group">
      Hover on me for the box shadow - it shouldn't be there
    </div>
  </div>

Since .modal__body is not .modal does it fit your statement.

Solution is to add .modal__body to the selector:

div:not(.modal) .modal__body .form__group:hover {
    box-shadow: inset 10px 0 0 #ccc;
}

http://codepen.io/anon/pen/wadvKZ

Upvotes: 3

Related Questions