I want to use this to print only the #section-to-print
:
@media print {
body * {
visibility: hidden;
}
#section-to-print, #section-to-print * {
visibility: visible;
}
#section-to-print {
position: absolute;
left: 0;
top: 0;
}
}
How do I extend this to hide the #section-to-print
when it is being displayed on the screen? In other words, it would only be visible when the media is print.
Set it to visibility: hidden, then @media print can override it.
#section-to-print, #section-to-print * {
visibility: hidden;
}
@media print {
body * {
visibility: hidden;
}
#section-to-print, #section-to-print * {
visibility: visible;
}
#section-to-print {
position: absolute;
left: 0;
top: 0;
}
}