Menu
It is possible to hide everything on a page and only show elements with a certain class. Using the following css, only elements with the print-me clas should be printed.
@media print {
.print-me, .print-me * {
display: inline;
}
body * {
display: none;
}
}
But this only works when print-me elements are direct children of body. When there is another element wrapped around the classes, as in the following html, nothing is displayed when printing.
<html>
<body>
<div>
<div class="print-me">
<p>This text should be printed, but isn't.</p>
</div>
<div>
<p>This text isn't printed.</p>
</div>
</div>
</body>
</html>
Codepen; Debug View
889
As I suggested in the comments, try it with the following css:
@media print {
.print-me, .print-me * {
visibility: visible;
}
body * {
visibility: hidden;
}
}
This seems to do what you're expecting.
71
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
