特定タグのみ印刷する方法

前提・実現したいこと

特定タグのみ印刷をさせたいです。

発生している問題・エラーメッセージ

print.cssを用意し、sectionタグのみ印刷プレビューへ表示させたいのですが、真っ白になってしまいます。
なお、sectionタグは画面表示させていません（@media screenでは、display: noneとしています）。

どのように指定すれば良いか教えていただけないでしょうか。

該当のソースコード

print.css

css
1@media print {
2    body :not(section) {
3        display: none;
4    }
5}

htmlファイル（内容抜粋）

html
1<body>
2  <div>zzz</div>
3  <div><section>xxxxxx</section></div>
4  <div><section>xxxxxx</section></div>
5</body>

行動規範の内容に同意します

回答1件

ベストアンサー

display: none; では子孫もろとも消えてしまうので、visibility で。
レイアウトを変えたい場合は横着せず個別に印刷用CSSを書いてください。

CSS
1@media print {
2    body :not(section) {
3        /*display: none;*/
4        visibility: hidden;
5    }
6
7    body section {
8        visibility: visible;
9    }
10}

当初はこんなのを思いつきましたが、思い直して変えています。

CSS
1    body section::before {
2        content: '<section>';
3        visibility: visible;
4    }
5
6    body section::after {
7        content: '</section>';
8        visibility: visible;
9    }