page breaks and css - how to skip last page?

Question

I have an issue with page-breaks and css:

I have this html-code (which is generated by php)

<div class="form-table courses">
coursename and pupils...
</div>
<div class="form-table courses">
coursename and pupils...
</div>
<div class="form-table courses">
coursename and pupils...
</div>

My css is this:

.form-table.courses {page-break-after:always;}

Above will generate 4 pages because it sets page-break even after the third div above. Is there any "simple" way of achieving to just get 3 pages?

I was thinking of last-child property of css, but what I understand there are not support for this in IE8 and below - and that's not good enough (It must at least handle ie8 - preferebly ie7 as well).

Of course I could add a class for the last div and then modifiy the css like this:

<div class="form-table courses">
coursename and pupils...
</div>
<div class="form-table courses">
coursename and pupils...
</div>
<div class="form-table courses lastpage">
coursename and pupils...
</div>

and add this line to my css:

.form-table.courses.lastpage {page-break-after:"";}

Is my solution the only one to have some kind of cross-browser compability? Or am I missing some attribute/value of css that I should use instead?

Answer 1

first-child is supported down to IE7 so I would do the following:

.courses {
    page-break-before: always;
}

.courses:first-child {
    page-break-before: avoid;
}

I hope that helps.

Answer 2

Another way which is more readable is

.page-break {
    page-break-after: always;
}

.page-break:last-child {
    page-break-after: avoid;
}

This will break after all divs except the last one

<div id="container">
<div class="form-table page-break">
 <!-- First Child -->
 coursename and pupils...
</div>
<div class="form-table page-break">
 <!-- Second Child -->
 coursename and pupils...
</div>
<div class="form-table page-break">
 <!-- Third Child -->
 coursename and pupils...
</div>
<div class="form-table page-break">
 <!-- Last Child -->
 coursename and pupils...
</div>
</div>