Menu
I have my HTML page with this structure:
<html>
<head></head>
<body>
<nav>
.... navigation menu
</nav>
<div>
<div></div>
<div class="to-print">
<h2>My div to display in print mode<h2>
<section>
<article>....content....</article>
</section>
</div>
<div></div>
</div>
<div>
.... HTML elements
</div>
</body>
</html>
If a user tries to print the page, I want only the content of the DIV with class to-print to be printed. How can I achieve that?
307
If that is the exact structure of your html then this will work for you.
@media print {
nav,
div > div:not(.to-print),
div + div:not(.to-print) {
display: none;
}
}
/* So you can see the styles working on the elements you want to hide outside of print */
nav,
div > div:not(.to-print),
div + div:not(.to-print) {
color: red;
}<nav>
.... navigation menu
</nav>
<div>
<div></div>
<div class="to-print">
<h2>My div to display in print mode<h2>
<section>
<article>....content....</article>
</section>
</div>
<div></div>
</div>
<div>
.... HTML elements
</div>You can you @media print and @media screen to define what will be printed and what will be shown on screen.
@media print {
.to-print {
--css to show content--
}
}
@media screen {
.to-print {
--css to not show content--
}
}
or
Create a new css and include like this:
<link rel="stylesheet" type="text/css" href="/print.css" media="print">
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
