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

Styling text on top of an image using CSS

I am attempting to overlay text on top of an image using the following code: .gallery-image { position: relative; } h2 { position: absolute; top: 200px; left: 0; width: 100%; } h2 span { color: white; font: bold 24px/45px Helvetica, Sans-S ...

htmlcss

What could be the reason for the malfunctioning toggle button on the Bootstrap navbar?

I'm having trouble with my bootstrap navbar. I've added the .sidebar-collapse class to the body tag so that when I click on the toggle button, the data should appear on the right side. However, this isn't happening. Can anyone spot what&apos ...

htmltwitter-bootstrapbootstrap-4

Create a single button that controls checkboxes with the help of HTML, CSS, SCSS, and Bootstrap 4

Is there a way to use only HTML, CSS, SCSS, and Bootstrap 4 to make all checkboxes default to the "on" condition when a button is clicked? Typically, this functionality would be achieved with JavaScript, but due to constraints, I am exploring alternative ...

htmlcssbootstrap-4

Does an href and click events both happen simultaneously?

JavaScript Purpose: Implement a series of loops and create anchor links with the 'href' attribute <a class="mui-control-item" v-for="(item, index) in dai" v-on:click ="abc(item)" :href="'#item'+(index+1)+ 'mobile'" ...

javascripthtmlvue.js

eliminate whitespace characters within a string

Here is a question that suggests an easy way to remove space characters in a string using R. However, I encountered an issue when trying to remove a space between two numbers (e.g. 11 846.4) while working with the following table: require(XML) require(RCur ...

htmlrregexlinuxstring

pattern to eliminate particular anchor elements

I am facing a challenge with a large HTML file that contains approximately 300 similar anchor tags that need to be removed: <a href="javascript:void(0);" onclick="javascript:thumbs(198, 0, 'architecture')" class="icon"></a> The prob ...

phphtmlregexdreamweaver

How can I make text wrap instead of overflowing to ellipsis in a list when using vue-material?

Question: <md-list-item> <md-icon v-bind:style="{color: transcript.color}">account_circle</md-icon> <div class="md-list-item-text"> <p>{{ transcript.text }}</p> </di ...

cssvue.jsmaterial-designvue-material

What is the best way to update the div id by extracting the last digits from a number?

Is there a way to change the div ids using a function? Before: <div id="a_1">a1</div> <div id="b_1">b1</div> <div id="c_1">c1</div> <div id="d_1">d1</div> <button onclick="change()">Change</button& ...

javascriptjqueryhtml

Show ng-message when email is invalid in Angular Material without using ng-pattern

I need to show an error message that says Please enter valid email. when an invalid email is entered, but I cannot use the ng-pattern attribute with this specific regex pattern. <md-input-container class="md-block" flex-gt-xs> <label>Ema ...

htmlangularjsangular-material

Using "-webkit-overflow-scrolling: touch" can cause issues with the CSS 3D perspective rendering

Looking for a solution specifically for iOS Safari Using -webkit-overflow-scrolling: touch seems to disrupt the 3d perspective on iOS devices. Check out the demonstration on CodePen. HTML <div class="pers"> <div class="scroll"> <di ...

htmlioscssoverflowmobile-safari

Unable to retrieve the following element in a JavaScript array

I am a beginner in JavaScript and I am attempting to access the next element of an array using an onclick function but so far I have not been successful. var i, len; function quiz() { var quiz_questions = [ "who is the founder of Fa ...

javascripthtml

Footer not being pushed down by content in mobile view on page

Hello everyone, Can you assist me with a query, please? My form works perfectly fine in desktop view, but it gets cut off on mobile view and I'm unsure of the reason why. Here is my code: .upload-pic { position: absolute; max-width: au ...

htmlcsstwitter-bootstrapbootstrap-4

Is there a method in AngularJS to automatically set app.comment to null if the point is not equal to 1 using front end logic?

Can we verify on the front end in AngularJS if app.point !=1 and app.comment==null? <td> <input type="number" max="5" min="1" ng-init="app.point=5" data-ng-model="app.point"> </td> < ...

javascriptangularjshtml

Using CSS Zoom / Transform with the iframe Tag in HTML

I'm currently working on embedding a child web page (a plain HTML/PHP file) into a parent web page built on WordPress. The challenge I'm facing is that the parent web page has a width of only 800px, whereas the child web page has a width of appro ...

htmliframe

Responsive HTML5 audio player adjusts size when viewed on mobile devices

I am facing a challenge with an HTML5 Audio player. It looks fine on desktop but behaves strangely on mobile devices. While the width remains intact, it repositions itself and floats over the element it is contained within. How can I prevent this repositio ...

htmlcssmobile-safarihtml5-audioaudio-player

Fetching JSON data cross-domain with the help of JavaScript or JQuery

I am currently attempting to retrieve JSON data from this specific url. However, I am encountering difficulties in making it function as intended. The goal is to seamlessly integrate the school's lunch menu utilizing NutriSlice. We are leveraging Ris ...

javascriptjqueryhtmljsonget

Exploring ways to retrieve information stored in localStorage within an android mobile application

I am currently developing an Android App using phonegap. The app is a simple game that generates random numbers for math problems. If the user answers correctly, their score increases, but if they lose, their name and current score are saved in localStor ...

javascriptandroidhtmlphonegap

The drop-down menu auto-loads as though it is being hovered over

I recently added a drop-down menu to my website that includes social media buttons. All the buttons are working properly, except for Google+. When the page loads, it seems as though the hover effect is automatically activated for the Google+ button. For e ...

htmldrop-down-menugoogle-plus

What are the best practices for utilizing pre-defined CSS classes in Vue.js libraries?

I don't have much experience with CSS, but I'm really eager to customize the appearance of my chart. The chart is generated by a vue.js library and comes with pre-defined CSS classes. However, I'm uncertain about how to access and modify the ...

cssvue.jscharts

Preserving form POST information between form handler and header invocation

I've hit a roadblock with this issue and could use some assistance. Thank you in advance for any help. I have a form on a page (guest/build.php) that contains several radio buttons: <form action="../php/build.php" method="POST"> <table class ...

phphtmlpost