How to Only Show Certain Parts with CSS for Print

How to only show certain parts with CSS for Print?

Start here. But basically what you are thinking is the correct approach.

Thanks, Now my question is actually
becoming: How do I apply CSS to a
class AND ALL OF ITS DESCENDANT
ELEMENTS? So that I can apply
"display:block" to whatever is in the
"printable" zones.

If an element is set to display:none; all its children will be hidden as well. But in any case. If you want a style to apply to all children of something else, you do the following:

.printable * {
   display: block;
}

That would apply the style to all children of the "printable" zone.

How to print only parts of a page?

IE supports onbeforeprint and onafterprint, but what you really want is a print stylesheet.

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

How to print only a specific page part?

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.

show div only when printing

You need some css for that

#printOnly {
   display : none;
}

@media print {
    #printOnly {
       display : block;
    }
}

Use CSS to hide contents on print

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.

Print CSS Hide the body and show a div inside the body

You can combine the all/universal (*) and :not selectors:

body *:not(#flash):not(#menu):not(#anuncios) {display: none}

<div>Not here...</div><div id="flash">Hello</div><div id="menu">World</div><div id="anuncios">!</div><div>Also missing...</div>

How to print certain classes only when I using ctrl+p for print

I am unsure how free you are with WordPress, but, if you are able to implement your own CSS (since you used it as a tag), you can use a media query to exclude/include classes when the user prints the page. @media print targets the print style of the page.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test.html</title>
    <link rel="stylesheet" href="test.css" />
</head>
<body>
    <p class="c1">class 1</p>
    <p class="c2">class 2</p>
    <p class="c3">class 3</p>
</body>
</html>

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

Web View:

web page saying class 1, 2, and 3 on 3 separate lines

Print View:

web page saying class 1 and 3 on 2 separate lines

How to Only Show Certain Parts with CSS for Print