1

Trying to select what will be printed on window.print().

Added the outmost element, so it contains childs elements (what explains the reason of using .printable and .printable *), class with printable, and added the style:

@media print{
    *:not(.printable *, .printable){
        display: none !important;
    }
}

The window.print(), when called, still shows everything.

Example

EDIT 1

Tried to add notPrintable to all :not(.printable, .printable *, .notPrintable) with jQuery and refer notPrintable on @media print.

Code:

jQuery:

$(":not(.printable, .printable *, .notPrintable)").addClass("notPrintable");

CSS:

@media print{
    .notPrintable{
        display: none !important;
    }
}

Now nothing shows.

Example 2

EDIT 2

Putting the solution example here if anyone needs it (available only after having an answer marked as accepted):

Example Final

Gilkan Solizaris
  • 98
  • 9
  • According to [this related Q/A](https://stackoverflow.com/questions/355313/how-do-i-hide-an-element-when-printing-a-web-page), you may want two separate style sheets where one sheet contains the CSS for the printed version of the page. – FThompson Jan 13 '19 at 03:22

2 Answers2

1

You can hide all elements and override the specific class in print media query.

@media print{
  body *:not(.printable) {
    display: none;
  }
}
westdabestdb
  • 4,353
  • 20
  • 28
  • Actually, I could **IF** all elements had block as display default. Tables need `display: table;`, for example. Already tried that. Thanks for trying. – Gilkan Solizaris Jan 13 '19 at 02:06
  • Well, actually you are right. Let me think of something else. – westdabestdb Jan 13 '19 at 02:07
  • What if you use 2 different stylesheets? `` `` – westdabestdb Jan 13 '19 at 02:15
  • But the issue here is about the `:not()` selector, actually. Sooo... just tried to use the `:not()` within jQuery and add `not-printable` on all classes that aren't `printable`. Now shows nothing... – Gilkan Solizaris Jan 13 '19 at 02:38
  • 1
    @GilkanSolizaris I edited the answer. I feel like it works now. – westdabestdb Jan 13 '19 at 02:49
  • Almost did the trick, if wasn't the child elements (I'll edit the question to alert about this). But good job. – Gilkan Solizaris Jan 13 '19 at 03:18
  • Tried to change your selector to `body *:not(.printable, .printable *)` to solve the issue, but no success. That approach makes show everything. – Gilkan Solizaris Jan 13 '19 at 03:19
  • Try `body *:not(.printable):not(.printable *)` (https://stackoverflow.com/questions/5684160/can-the-not-pseudo-class-have-multiple-arguments). – FThompson Jan 13 '19 at 03:24
  • @Vulcan tried that as well and didn't work. This `:not():not()` syntax is the same as "`not a AND not b`", so it's the same as "`not a,b`". Had to use the approach of my second example (trying to use jQuery) with @westdabestdb selector `body *:not(.printable)`. The final answer is in the Example Final link at the question. – Gilkan Solizaris Jan 13 '19 at 03:42
0
$("body *:not(.printable, .printable *, .notPrintable)").addClass("notPrintable");

and

@media print{
  .notPrintable {
    display: none !important;
    }
}

did the trick.

The "selector" tip was given by @westdabestdb

Gilkan Solizaris
  • 98
  • 9