@Media print css

Question

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?

score 7 · Answer 1 · answered Sep 21 '15 at 15:59

7

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>

answered Sep 21 '15 at 15:59

Aaron

10,187
3
23
39

if 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 – Kernel Med Sep 21 '15 at 16:57
if i want to change the color while print is this possible ? – chandu komati Apr 12 '23 at 12:44
Of course. You need to specify the CSS for the print styles however you wish it to print. – Aaron Apr 13 '23 at 15:26

score 4 · Answer 2 · answered Sep 21 '15 at 15:58

4

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">

answered Sep 21 '15 at 15:58

marcosspn

376
5
14

if i want to change the color while print is this possible ? – chandu komati Apr 12 '23 at 12:45

chandu komati · Answer 3 · 2023-04-12T12:51:56.160

@media print {
  nav, 
  div > div:not(.to-print), 
  div + div:not(.to-print) {
      color: red ;
  }
}

/* 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: blue;
  }

<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>

See this is not working please correct if any thing wrong. default color i have make blue when ever i print the page the nav bar should me red

@Media print css

3 Answers3

Linked

Related