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

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:

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

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

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