title: How to only show certain parts with CSS for Print?
body: <p>I have a page with lots of data, tables and content.
  I want to make a print version that will only display very few selected things.</p>
  
  <p>Instead of writing another page just for printing, I was reading about CSS's feature for "@media print".</p>
  
  <p>First, what browsers support it? Since this is an internal feature, it's OK if only the latest browsers support it.</p>
  
  <p>I was thinking of tagging a few DOM elements with a "printable" class, and basically apply "display:none" to everything except those elements with the "printable" class.
  Is that doable?</p>
  
  <p>How do I achieve this?</p>
  
  <p>EDIT:
  This is what I have so far:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  @media print {
      * {display:none;}
      .printable, .printable &gt; * {display:block;}
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>But it hides everything. How do I make those "printable" elements visible?</p>
  
  <p>EDIT:
  Trying now the negative approach</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  @media print {
      body *:not(.printable *) {display:none;}
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>This looks good in theory, however it doesn't work. Maybe "not" doesn't support advanced css ...</p>