Home/ Questions/Q 960481
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T01:11:20+00:00

I’m trying to create a pretty-print html page. I need to force a page-break,

  • 0

I’m trying to create a pretty-print html page. I need to force a page-break, between top-level constructs, so I added a CSS class to the top-level element of each construct, and set page-break-before:always in the CSS for that class. E.g.:

<body>
<div class="prettyprint">
    <div class='toplevel'>
        ...
    </div>
    <div class='toplevel'>
        ...
    </div>
</div>
</body>

.prettyprint .toplevel { page-break-before:always; }

My problem is I get a blank page, before the first top-level element. Which makes perfect sense, considering what page-break-before:always is supposed to do. But I don’t want it.

So, one option is to not include the “toplevel” class in the first element, or to provide a new “firsttoplevel” class that doesn’t set page-break-before:always, and set it for the first top-level element, and then use “toplevel” for all the others. I could do it, easily enough, but it seems like it’s violating separation of concerns.

So I was wondering if there was a way to do this in CSS? To set a rule that would apply only to the first “toplevel” child of “prettyprint”?

Any ideas would be appreciated.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    :first-child

    might work but pretty sure there are issues with IE6, see: http://www.quirksmode.org/css/firstchild.html

    edit: doesn’t work in IE6, and for newer versions of IE doctype must be used for it to work.

    • 0