title: Use CSS to hide contents on print
body: <p>I’m looking for an easy way to hide everything except a certain div and its contents.</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;&lt;/head&gt;
    &lt;body&gt;
      &lt;div class="header"&gt;...&lt;/div&gt;
      &lt;div class="menu"&gt;...&lt;/div&gt;
      &lt;div class="content"&gt;...&lt;/div&gt;
      &lt;div class="footer"&gt;...&lt;/div&gt;
    &lt;/body&gt;.
  &lt;/html&gt;
  </code></pre>
  
  <p>So, for example, if I want to print only <code>div.content</code>, I would do it like this:</p>
  
  <pre><code>.header, .menu, .footer {
    display: none;
  }
  </code></pre>
  
  <p>And if the layout is complicated, it becomes messy. Is there an easier way to do this with CSS?</p>