0

I am using a script that generates the ability to show a small image which the user can move the mouse over to mangnify a portion of the image. It genrate this code:

<div class="magnifyarea featuredimagezoomerhidden" style="position: absolute; z-index: 0; width: 300px; height: 300px; left: 659.667px; top: 454.233px; visibility: visible; overflow: hidden; border: 1px solid black; display: none;">
    <div style="position: relative; left: -234.833px; top: -122.133px; z-index: 0;">
        <img src="images/image1.jpg" style="width: 969px; height: 546px;">
    </div>
</div>

My website is also responsive. Most of the classes are set to resize at different resolutions and just be sure that no images are too big at the end of the css file I have:

img {
    max-width: 100% !important;
    height: auto !important;
}

This causes a problem with the script and I want to exclude that image from the img rule. I tried using the :not() pseudo class which worked until the found it only worked because it completely disabled the img rule.

Am I using the :not pseudo class correctly?

img:not(.magnifyarea, .featuredimagezoomerhidden) {
    max-width: 100% !important;
    height: auto !important;
}

I was thinking of adding !important into the inline code that in generated but I can find where it generates to code for the image. Would it help if I included the code from the .js file?

Richard Young
  • 462
  • 5
  • 20
  • 1
    jQuery `:not()` and CSS `:not()` are different. In CSS, you can't have multiple selectors in a single `not()`, you have to chain them, like in the question above. – Jacob G Jan 03 '17 at 15:07
  • Not a duplicate. Asking something different. – Richard Young Jan 03 '17 at 15:07
  • The other question talks about having multiple not classes, Jacob. I'm trying to exlude it from a division that has two class names. I'm assuming it need to exclude it from both. – Richard Young Jan 03 '17 at 15:09
  • Okay, gotcha. You should probably put that in the question, it looks like a duplicate. – Jacob G Jan 03 '17 at 15:11
  • 1
    It's not just the broken `:not()` selector, but the fact that you're searching for `img` elements without those classes, when the classes are actually two elements above on a parent. The `img {}` rule that got you into trouble here is precisely why making blanket `!important` rules that affect your whole page is very bad practice - because they're difficult to override. – Jon Uleis Jan 03 '17 at 15:12
  • That was partly the answer. It lead me to it. If you want to put it as the answer, I'll accept it. – Richard Young Jan 03 '17 at 16:57

0 Answers0