When it comes to printing, the @Media CSS rule

I have a specific structure on my HTML page:

<html>
<head></head>
<body>
<nav>
  ....  navigation menu
</nav>
   <div>
         <div></div>
         <div class="to-print">
           <h2>The designated div for print mode display<h2>
           <section>
               <article>....content....</article>
           </section>
         </div>
         <div></div>
   </div>
   <div>
      .... More HTML elements here
   </div>
</body>
</html>

When it comes to printing the page, I aim to have only the content from the DIV that has the class to-print displayed. What steps should I take to achieve this printing behavior?

htmlcssprintingmedia

Answer №1

If this is the precise layout of your HTML code, then this solution will work for you.

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

/* To visualize the styles applied to the elements you wish to hide when not in print mode */
  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>

Answer №2

If you want to control what appears on print and what appears on the screen, you can use @media print and @media screen in your CSS.

 @media print {
       .to-print {
           --Add CSS here to display content--
       }
 }

 @media screen {
       .to-print {
           --Add CSS here to hide content--
       }
 }

Alternatively, you can create a separate CSS file specifically for printing:

  <link rel="stylesheet" type="text/css" href="/print.css" media="print">

Answer №3

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

/* To demonstrate the styles 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>

It seems like this is not functioning correctly. Please make corrections if necessary. The default color I have set to blue. Whenever I print the page, the nav bar should turn red.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to adjust the text color to white

As someone who is new to Typescript, I'm facing a challenge in changing the text color to white and struggling to find a solution. I'm hoping that someone can guide me in the right direction as I've tried multiple approaches without success ...

csstypescriptmaterial-ui

Unable to stop page refresh following form submission or file upload

Is it possible to upload a photo with Ajax to Express and have the response generate desired HTML? Whenever I submit the form, it redirects me and displays the picture data as an object. Here's the Express code: const storage = multer.diskStorage({ ...

jqueryhtmlnode.jsajaxexpress

Scrolling in iOS 8 causing flickering problem with background image

Utilizing the Supersized jQuery slider plugin to create a full-page background slider with a fade-in effect and added height for scrolling. The slider functions correctly on desktop, but upon testing on an iOS 8 iPad device, there is noticeable flickering ...

javascriptjqueryhtmlioscss

Disable the 'bouncy scrolling' feature for mobile devices

Is there a way to prevent the bouncy scrolling behavior on mobile devices? For example, when there is no content below to scroll, but you can still scroll up and then it bounces back when released. Here is my HTML structure: <html> <body> ...

javascriptjqueryhtmlioscss

I am looking to verify a time input using Joi

I have created a form with date and time input fields. I utilized the joi library for input validation to ensure that the date and time inputs are not left empty separately. Although I have managed to apply date validation successfully, I am facing challen ...

htmlnode.jsjoi

Struggling with making an Ajax and Jquery drop down menu work? Wondering how to use Javascript to retrieve a variable and then utilize it in PHP? Let's troubleshoot

Currently, I am utilizing Ajax/Jquery to present a dropdown menu with data retrieved from my SQL database. The process involves using javascript to obtain a variable that is then utilized in PHP. However, the function doesn't seem to be working as exp ...

javascriptphpjqueryhtmlajax

Centering the logo using Material-UI's alignment feature

Need help centering a logo in my login form using Material-UI. Everything else is centered except for the logo, which is stuck to the left side of the card. I've tried adding align="center" and justify="center" under the img tag, but it's still ...

cssreactjsmaterial-ui

Issue with iframe's size not displaying correctly

<body> <script> document.write("<iframe id='theframe' src='http://www.website.com?testvr=" + testvr + " height='900' width='500'></iframe>"); </script> </body> The iframe is added, but ...

javascripthtmliframe

Having trouble getting two divs to align on the same line using the 'inline' method

I am struggling to align multiple buttons within divs on the same line. Two of these buttons should only be displayed when a specific value is greater than 0. I attempted using display:inline-block in a container div, along with style="float:right", but it ...

htmlcss

The memory usage steadily increases when you refresh data using the anychart gantt chart

I have a basic anychart code to update a gantt chart every second: function initializeSchedule(){ anychart.onDocumentReady(function () { anychart.data.loadJsonFile("../scheduler?type=getschedule", function (data) { documen ...

javascripthtmlajaxanychart

Tips for customizing a link element that routes to a React component

App.js: import './App.css'; import logo from './images/logo.png'; import Home from './components/Home'; import About from './components/About'; import Calculators from './components/Calculators'; import Cla ...

htmlcssreactjsreact-routerreact-router-dom

Chrome compatibility issue with margin collapsing

I'm currently working on a website and encountering a CSS issue. It appears fine in Firefox, but has some odd layout problems in Chrome. I would appreciate any assistance on how to resolve this issue. On the main page, if you scroll down, you'll ...

htmlcssmargin

Retrieve the selected option from the dropdown menu in the specified form

What should I do if I have numerous products and want users to be able to add new dropdown boxes dynamically? When the submit button is clicked, only the value of "category[]" within the form should be retrieved. https://i.stack.imgur.com/v1fnd.png Below ...

javascriptphpjqueryhtmllaravel

Remove the unnecessary space at the bottom of the Mat Dialog

I'm currently utilizing Angular Material within my Angular application. One issue I am facing is the excessive whitespace at the bottom of a dialog that displays information about a post. How can I reduce or eliminate this unnecessary space? Take a l ...

htmlcssangularangular-materialdialog

Automatically scroll to the end of the data retrieved through ajax

I am currently developing a live chat website for my users and I am using ajax to fetch the chat messages. However, I am facing an issue where whenever I enter a new message, it does get added to the database and displayed, but the scroll doesn't auto ...

javascriptjquerycssajax

Instructions on keeping a numerical counter at its current value for all site visitors

Recently, I integrated a number counter into my website. However, I am facing an issue where the count resets to zero whenever a new visitor accesses the site. I'd like the count to remain persistent and update based on the previous count. For instanc ...

javascripthtml

Interactive Thumbnail Previews

There seems to be an issue with the thumbnail links on my page. The leftmost and rightmost links work fine, but the middle ones are not functioning properly when clicked. The PHP code used to generate these links is the same for all of them, so it's p ...

javascriptphphtmlcss

What causes immediately invoked functions within event handlers to be executed before the event is triggered?

let b = (function maria() { alert("ee"); })(); * this code runs as soon as the page loads * <button onclick="b">Click me</button> * this code only runs when button is clicked * <button onclick="alert('ee')">Click m ...

javascripthtml

Encountering a syntax error when attempting to generate a div dynamically with jQuery

I am in the process of creating a view application form using Bootstrap after submitting a form. Initially, I created it utilizing two 'div' elements. Now, I am exploring how to dynamically generate a div upon clicking a button: <i> Sectio ...

javascriptjqueryhtmlcssjson

The submitHandler for AJAX does not function properly when using bootstrapvalidator

I'm encountering an issue with the Bootstrap validation tool found at https://github.com/nghuuphuoc/bootstrapvalidator The submitHandler function seems to be malfunctioning for me. Upon form submission, the entry is not being created and the form rel ...

javascriptjqueryhtmlajax