How to only show certain parts with CSS for Print?

Question

I have a page with lots of data, tables and content. I want to make a print version that will only display very few selected things.

Instead of writing another page

Answer 1

If you want to display some links etc. when in the browser, that you don't want to be printed. Furthermore you have some logos and letterhead info that only should go on the printed page. This seems to work fine:

Example:

CSS:

@media print {
  .noPrint {
      display:none;
  }
}
@media screen {
   .onlyPrint {
       display: none;
   }
}

HTML:

<div class="noPrint" id="this_is_not_printed"  >
   <a href=links.html>
</div>
<div class="onlyPrint"  id="this_is_only_seen_on_printer" >
   <img scr=logo.png >
   <img scr=letterhead.png >
</div>

Answer 2

Start here. But basically what you are thinking is the correct approach.

Thanks, Now my question is actually becoming: How do I apply CSS to a class AND ALL OF ITS DESCENDANT ELEMENTS? So that I can apply "display:block" to whatever is in the "printable" zones.

If an element is set to display:none; all its children will be hidden as well. But in any case. If you want a style to apply to all children of something else, you do the following:

.printable * {
   display: block;
}

That would apply the style to all children of the "printable" zone.

Answer 3

I got here because I was curious about printing a chart generated by chart.js. I wanted to just print the chart directly from the page (with a button that does a 'window.print') without all of the other content of the page.

So, I got closer by using the technique from the answer here: Why can't I override display property applied via an asterisk? .

You have to apply the 'asterisk' to the 'body' element, not just by itself. So, using the example CSS that the OP (Nathan) added to the question, I changed it to this:

<style type="text/css">
@media print {
    body * {display:none;}
    .printable, .printable > * {
    display: block !important;
  }
}
</style>

Then adding that 'printable' class to the chart itself, as in

<canvas id="myChart" class="printable" width="400" height="400"></canvas>

Which removed all page elements on the printed output except the chart when the 'print' button is clicked (via this):

<script>
    myChart.render();
    document.getElementById("printChart").addEventListener("click",function(){
        window.print();
    });     
</script>

So, perhaps this will help anyone that gets to this question via the googles.

Answer 4

A simple way:

<style>
    .print-only{
        display: none;
    }

    @media print {
        .no-print {
            display: none;
        }

        .print-only{
            display: block;
        }
}
</style>

Answer 5

Nearly all browsers support it. It might be advantageous to use the media attribute on the link tag.

Using display: none; in some of your rules would be an appropriate way to handle your situation.

Answer 6

I suggest to hide the element that you won't print:

HTML

<h1 class="no-print" >Welcome Just Screen</h1>
<div> I want print this section :)</div>
<div class="no-print">It's display only on screen</div>

CSS

@media print {     
    .no-print {
        display: none;
    }
}