CODEWITHSUNDEEP
css
Random Tourist
Random Tourist

Reputation: 191

How to print only a specific page part?

I know that to prevent some page parts from being printed we can add a class and tell CSS that we don't want elements from this class to be printed. For example:

page.html:

<div class="main">
<div class = "section1 donotprint">
  <p>Hey, I'm not printed. Poor me.</p>
</div>
<div class = "section2">
  <p>Hey, I am printed! Lucky me!</p>
</div>

print.css:

.donotprint {
  display: none;
}

And then including <link rel="stylesheet" type="text/css" media="print" href="print.css" /> does the magic.

But I'm working on a quite heavy project and I don't want to pollute the code with donotprint classes everywhere. So I would like to specify what I do want to print instead of specifying what I don't want to. So in my example it would be like that:

page.html:

<div class="main">
<div class = "section1">
  <p>Hey, I'm not printed. Poor me.</p>
</div>
<div class = "section2 print">
  <p>Hey, I am printed! Lucky me!</p>
</div>

I tried :not(.print) {display: none;} but the display: none; affects the children as well so nothing is printed (well, the empty <div class = "section2 print"></div> is).

So does the CSS allows this kind of thing? And if so, how?

Upvotes: 2

Views: 820

Answers (2)

cloned
cloned

Reputation: 6742

You can put everything you don't want to print in the print.css file, this is not limited to one class. You can add, for example, something like nav, header, main, footer {display: none} to your print.css file to stop these elements from printing.

And then just set display: block to everything you want to print.

You can also change all other attributes, like color/font-size, spacing....

Upvotes: -1

Roko C. Buljan
Roko C. Buljan

Reputation: 205987

You can use the * selector in combination with immediate child >

.main > * {       /* Basically the sections */
  display: none; 
}

.main > .print {
  display: initial;
}

The above is not flexible like specifically defining what to hide - since it'll work for immediate child only.

Upvotes: 4

Related Questions