@Media print css
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">