@Media print css

Question

I have my HTML page with this structure:

  ....  navigation menu

   

         


        
      

Answer 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;
  }

  ....  navigation menu

   

         

         

           
My div to display in print mode

           

               
....content....
           
         
         

   
   

      .... HTML elements