title: Hiding all web page items except for single nested div
body: <p>Suppose my web page has a struture like this:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="fee"&gt;
          &lt;div id="fi"&gt;
  
              &lt;div id="actual_content"&gt;
  
                  &lt;p&gt;Content&lt;/p&gt;
                  &lt;div id="some_important_stuff"&gt;Blah&lt;/div&gt;
                  &lt;p&gt;More content&lt;/p&gt;
                  &lt;span class="and_another_thing"&gt;Meh&lt;/span&gt;
  
                  ...
              &lt;/div&gt;
  
              &lt;div id="fo&gt;
                  ...
              &lt;/div&gt;
  
              ...
          &lt;/div&gt;
  
          &lt;div id="fum"&gt;
              ...
          &lt;/div&gt;
  
          ...
      &lt;/div&gt;
  
      &lt;div id="fazz"&gt;
          ...
      &lt;/div&gt;
  
      ...
  &lt;/body&gt;
  </code></pre>
  
  <p>I want to create a print CSS style that hides everything except for the contents of <strong>actual_content</strong>.</p>
  
  <p>My first attempt was like this:</p>
  
  <pre><code>body * {
      display: none; /* Hide everything first */
  }
  
  /* Show content div and all of its ancestors */
  
  body &gt; #fee {
      display: block;
  }
  
  body &gt; #fee &gt; #fi {
      display: block;
  }
  
  body &gt; #fee &gt; #fi &gt; #actual_content {
      display: block;
  }
  
  /* Unhide contents of #actual_content */
  
  #actual_content * {
      display: block; /* Not ideal */
  }
  </code></pre>
  
  <p>However, since there's no "display: auto" or "display: default", I mess up the styles of <strong>actual_content</strong>'s items when I try to unhide them. I also don't like hard coding the path to <strong>actual_content</strong> since it might change.</p>