CODEWITHSUNDEEP
javascriptcss
Gilkan Solizaris
Gilkan Solizaris

Reputation: 98

The use of CSS `*` with `:not()` within `@media print` still shows everything. What is the reason?

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

Upvotes: 1

Views: 227

Answers (2)

Gilkan Solizaris
Gilkan Solizaris

Reputation: 98

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

and

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

did the trick.

The "selector" tip was given by @westdabestdb

Upvotes: 0

westdabestdb
westdabestdb

Reputation: 4648

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

@media print{
  body *:not(.printable) {
    display: none;
  }
}

Upvotes: 1

Related Questions