tags:

views:

24

answers:

1

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.

+2  A: 
: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.

Alex
+1 the best way I can think of. You could use jQuery to add the functionality for IE6.
Pekka
IE breaks some prints even in current version [did for me at least], I wouldn't care much about IE6 :P
naugtur
You are a smrt man.
Pat