Use CSS to hide contents on print

Question

I’m looking for an easy way to hide everything except a certain div and its contents.

<html>
  <head></head>
  <body>
    <div class="header">...</div>
    <div class="menu">...</div>
    <div class="content">...</div>
    <div class="footer">...</div>
  </body>.
</html>

So, for example, if I want to print only div.content, I would do it like this:

.header, .menu, .footer {
  display: none;
}

And if the layout is complicated, it becomes messy. Is there an easier way to do this with CSS?

You can print only div you want by following the article! http://stackoverflow.com/questions/2255291/print-the-contents-of-a-div — BillDo168, Oct 28 '14 at 02:58
Does this answer your question? [How do I hide an element when printing a web page?](https://stackoverflow.com/questions/355313/how-do-i-hide-an-element-when-printing-a-web-page) — Jasper de Vries, May 02 '23 at 13:56

score 36 · Answer 1 · answered Jan 27 '11 at 13:33

36

@media print {
.noPrint {
    display:none;
  }
}

Now you need to apply the class noPrint to the elements you want to hide in printing.

It is good practice to use a style sheet specifically for printing, and and set it's media attribute to print.

Example:

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

answered Jan 27 '11 at 13:33

Sarfraz

377,238
77
533
578

Be sure to add the print section after all other style sections have been specified. That way print statements will override other styles at print time. – Mike Jan 27 '11 at 13:40
question said: `looking for an easy way to hide everything except a certain div` – Pooya Jan 18 '16 at 10:47
1

This should be the accepted answer. It is the most flexible of all other answers and does not involve using JS or using some JS plugin to manually show-hide elements. – TinkerTenorSoftwareGuy Aug 28 '17 at 19:55

score 9 · Accepted Answer · edited Oct 15 '14 at 22:34

I did it css3 way: using not pseudo class and direct ancestors (children)

/* hide all children of body that are not #container */
body > *:not(#container) {
  display: none;
}
/* hide all children of #container that are not #content */
#container > *:not(#content) {
  display: none;
}
/* and so on, until you reach a div that you want to print */
#content > *:not(#print_me) {
  display: none;
}

This way you can eliminate everything except what you want to print even in very complex layouts. :not is very efficient here because it takes care about any future modifications of you html.

score 6 · Answer 3 · answered Jan 27 '11 at 13:33

6

Assign a separate CSS file that defines the behaviour when printing a web page.

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

and then within that file just define:

.header, .menu, .footer { display: none; }

answered Jan 27 '11 at 13:33

Tr1stan

2,755
1
26
45

score 0 · Answer 4 · answered Jan 27 '11 at 13:40

0

You can use classes.

.classHide{display: none}

Depending on the language you are using, when if==true you can add a class to header, menu and footer.

So you won't need to use another css file.

answered Jan 27 '11 at 13:40

Thiago

1,547
3
25
40

How are you going to tell these to only hide when printing using anything but CSS? – BoltClock Jan 27 '11 at 13:44
1

My point is that you cannot use a server-side language to tell the styles only to apply when printing. This is because printing happens on the client side, so the server won't know anything. – BoltClock Jan 28 '11 at 00:13

score 0 · Answer 5 · answered Jan 27 '11 at 14:03

0

Depending on your HTML structure (and browsers you need to support, because IE6 won't support this), you could hide all top-level divs and just show the one/few you want to show:

body > div {
   display: none;
}

#content {
  display: block;
}

answered Jan 27 '11 at 14:03

RoToRa

37,635
12
69
105

Use CSS to hide contents on print

5 Answers5

Linked

Related