jqueryhtmlcsspage-breakpage-break-inside

Get a specific CSS whenever a page break is insert

here is a outline of what my page looks like

.section
{
  height: 50px;
  width:50px;
  border:1px solid black;
  /*border-bottom:5px solid gray;*/
  margin:10px;
	margin-bottom:200px;
	page-break-inside: avoid;	
}
<div class='section'></div>
<div class='section'></div>
<div class='section'></div>
<div class='section'></div>
<div class='section'></div>
<div class='section'></div>
<div class='section'></div>

What i am expecting achieve here is, whenever we print this page, the first box and last box on every page should have a gray border.

Please do help out if anyone has come across such scenario before.

Currently, I am searching a JavaScript trigger which would fire on page break and help me access the first element on the page. But if anyone can suggest other line of search that would be helpful too.

Update 1: This content is generated dynamically. The sizes of the boxes could vary. So i cant be sure how many boxes will show up on each page.

Update 2: I have thought about headers and footers. But that wont completely help. As i have to add certain styles to the content of the first and the last DIV.

Solution 

  • .section
{
  height: 50px;
  width:50px;
  border:1px solid black;
  /*border-bottom:5px solid gray;*/
  margin:10px;
	margin-bottom:200px;
	page-break-inside: avoid;	
}
div.wrapper .section:first-child {border-bottom:5px solid gray;}
div.wrapper .section:last-child {border-bottom:5px solid gray;}
     
<div class="wrapper">
<div class='section'></div>
<div class='section'></div>
<div class='section'></div>
<div class='section'></div>
<div class='section'></div>
<div class='section'></div>
<div class='section'></div>
</div>

    You can do it with simple CSS. Wrap all divs in one DIV. Now using css :first-child and :last-child you can give desired properties.