External print.css file - How to make element visible on print only, not visible on screen?

Question

I am currently using the following as my external print.css file:

/* Remove unwanted elements */

hiddenedit, #hiddenbuttons, #header, #nav, .propertyselector, li.hiddentab, ul.hiddentab { display: none; }

/* Ensure the content spans the full width */

container, #container2, #content { width: 100%; margin: 0; float: none; }

/* Change text colour to black (useful for light text on a dark background) */ .lighttext { color: #000 }

/* Improve colour contrast of links #781351 */ a:link, a:visited { color: #000 }

I understand how this works to make display: none for the items that I do not want to print on the page. My question is: How can I do the reverse of this? What would I do if there are elements on the page that I only want to be visible when the page prints, not visible when the page is viewed?

Any ideas? Thank you.

Answer 1

Simply put

.onlyprint {display: none;}
@media print {
  .onlyprint {display: block;}
}

into your CSS rules.

Answer 2

Surely do exactly the reverse... in your screen css file set those items you want hidden to display: none and then get the print.css to show them.

Answer 3

You would have the online stylesheet say hidden, and the print css sheet say display. Is that what you mean? you would have to assign divs for it.

Answer 4

I'd prefer the following over phihag's code, because you can also apply it to other then block elements

@media not print {
  .only-print {display: none!important;}
}
@media print {
  .only-not-print {display: none!important;}
}