1
<html>
<body>
<nav>....</nav>
<article>more things...</article>
<div id="myModal" class="modal">contents</div>
<body>
</html>

In linked CSS file (using Chrome):

@media print{
body:not(#myModal){
    display:none;
    visibility:hidden;
}
#myModal{ /*shouldn't have to but doesn't work anyway */
    display:block;
    visibility:visible;
}
}

This does not work. I am trying to get rid of everything behind the modal for printing without scripting. Apparently that is not possible. Can a display:none :not not negate elements contained within the container?

Edit: I have looked here, but cannot find the answer. https://www.w3.org/TR/css3-selectors/#negation

Edit: I want to hide everything except the modal. But display:none keeps that from happening. It does it for the whole body element, regardless of my negation.

Edit: Whatever it is, it does not work in the media call, so my current idea is to move the div. I thought there might be a better way. Edit: I also need display:none because print will still print the blank pages where the elements are hidden. display will remove those elements and allow me to print my modal without a bunch of blank pages of hidden elements.

johnny
  • 19,272
  • 52
  • 157
  • 259

1 Answers1

2

display: none doesn't load the element or it's children. To Chrome, Firefox, etc., #myModal doesn't exist. Consequently, you can't use display: none as the way to did.

There are other alternatives though:

Option 1

@media print {

    * {
       visibility: hidden;
       height: 0 !important; /* added !important with info from update */
    }

    #myModal {
        visibility: visible;
        height: auto !important;
    }

}
<body>
<nav>....</nav>
<article>more things...</article>
<div id="myModal" class="modal">contents</div>
<button onclick="window.print();">Print</button>
<body>

Option 2

This probably won't work with your new update.

@media print {
    body > *:not(#myModal) {
        display: none;
    }
}
<body>
<nav>....</nav>
<article>more things...</article>
<div id="myModal" class="modal">contents</div>
<button onclick="window.print();">Print</button>
<body>
Chris Happy
  • 7,088
  • 2
  • 22
  • 49
  • The CSS does not with the media call @media print, so maybe it is something special there. I believe the statement is correct, but the CSS did not affect anything. I will need to move the div for printing out of the body element temporarily via scripting, best I can tell so far. Thanks. – johnny Mar 22 '17 at 21:09
  • I marked it answered because your example works. Something else is wrong with mine evidently. Must be because it is modal. – johnny Mar 23 '17 at 13:29
  • 1
    Thanks. I got it working. It was some naming issues. – johnny Mar 23 '17 at 19:00
  • It happens to the best of us :) – Chris Happy Mar 23 '17 at 19:01