@Media print css
33,674
Solution 1
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>
Solution 2
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">
Author by
Kernel Med
Updated on September 03, 2020Comments
-
Kernel Med over 3 years
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? -
Kernel Med over 8 yearsif we add an other div as parent of the current first div we will have a problemes, the ideal is to have take all cases with any struct, for examle : if a div have a child with a class to-print the div should be display:normal