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