Use CSS to Hide Contents on Print

Using css to only print hidden content

You can insert the printable content into a hidden div and use the @media print to unhide it.

.print {display:none;}

@media print {

  body :not(.both) {display:none;}

  .print  {display:block!important;}

}

<html>

<head></head>

<body>

  <div>

    Screen content

  </div>

  

  <div class="both">Both media</div>

  

  <div class="print">

    Printable content

  </div>  

</body>

</html>

Use CSS to hide contents on print

I did it css3 way: using not pseudo class and direct ancestors (children)

/* hide all children of body that are not #container */
body > *:not(#container) {
  display: none;
}
/* hide all children of #container that are not #content */
#container > *:not(#content) {
  display: none;
}
/* and so on, until you reach a div that you want to print */
#content > *:not(#print_me) {
  display: none;
}

This way you can eliminate everything except what you want to print even in very complex layouts. :not is very efficient here because it takes care about any future modifications of you html.

Print CSS Hide the body and show a div inside the body

You can combine the all/universal (*) and :not selectors:

body *:not(#flash):not(#menu):not(#anuncios) {display: none}

<div>Not here...</div>

<div id="flash">Hello</div>

<div id="menu">World</div>

<div id="anuncios">!</div>

<div>Also missing...</div>

Hide text on page but show it on window.print

you can use ´screen´ for regular screens so all you would have to do is

@media screen {
    .hide-from-screen {
        display: none;
    }
}

@media print {
     .hide-from-printer {
          display: none;
      }
 }

and use those classes accordingly.

Hide container, but show content

That won't work. You can do specific tricks though.

If container has a background, you can make the background transparent. You could 'undo' other styling in a similar fashion.

If container has other content, you could wrap that content in spans or divs and hide those. If it contains just text, you could make the font-size: 0, and set the font-size of content to a specific size (or 1rem for default).

But all those possiblities are just work-arounds for the fact that you can't hide a parent while keeping the child visible, so basically I think option 3 is the best option you have.

hide HTML div when printing page

try this:

<style type="text/css" media="print">
.dontprint
{ display: none; }
</style>

<div class="dontprint">I'm only visible on the screen</div>