title: How to print multiple elements in a page individually using css?
body: <p>My page structure is like</p>
  
  <pre><code>    &lt;html&gt;
      &lt;body&gt;
      &lt;a href="#one"&gt;One&lt;/a&gt;
      &lt;a href="#two"&gt;Two&lt;/a&gt;
      &lt;a href="/" onClick="window.print();"&gt;Print One&lt;/a&gt; // I want this to print "My Content 1"
      &lt;a name="one" id="one"&gt;One&lt;/a&gt;
      &lt;div class="one"&gt;My Content 1&lt;/div&gt;
  
      &lt;a name="two" id="two"&gt;Two&lt;/a&gt;
      &lt;a href="/" onClick="window.print();"&gt;Print Two&lt;/a&gt; // I want this to print "My Content 2"
      &lt;div class="two"&gt;My Content 2&lt;/div&gt;
  
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>Now I want to implement two different print buttons to print the specified element at a time. I'm familiar with CSS approach of printing and blocking the anti-print elements like sidebar, footer. For some reason, I don't want to use jquery though a lightweight js can be used.</p>