Получить определенный CSS всякий раз, когда вставляется разрыв страницы

Question

Вот схема того, как выглядит моя страница

.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>

Чего я ожидаю достичь, так это того, что когда мы печатаем эту страницу, первое и последнее поля на каждой странице должны иметь серую рамку.

Пожалуйста, помогите, если кто-нибудь сталкивался с таким сценарием раньше.

В настоящее время я ищу триггер JavaScript, который срабатывает при разрыве страницы и помогает мне получить доступ к первому элементу на странице. Но если кто-то может предложить другую строку поиска, это тоже будет полезно.

Обновление 1: это содержимое генерируется динамически. Размеры коробок могут отличаться. Так что я не могу быть уверен, сколько ящиков появятся на каждой странице.

Обновление 2: я думал о верхних и нижних колонтитулах. Но это не совсем поможет. Поскольку я должен добавить определенные стили к содержанию первого и последнего DIV.

Answer 1

.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>

Вы можете сделать это с помощью простого CSS. Оберните все div в один DIV. Теперь с помощью CSS :first-child а также :last-child Вы можете дать желаемые свойства.

Answer 2

Вы можете вставить пользовательские разрывы страниц, когда страница печатается с использованием пустого элемента в HTML-разметке. А затем просто передайте элемент до него и после него специальный класс для цели.

@media all {
  .page-break {
    display: none;
  }
}

@media print {
  .page-break {
    display: block;
    page-break-before: always;
  }
  .section.before {
    border: 5px solid blue;
  }
  
  .section.after {
    border: 5px solid red;
  }
}

.section {
            height: 50px;
            width: 50px;
            border: 1px solid black;
            margin: 10px;
            margin-bottom: 200px;
            page-break-inside: avoid;
        }

<div class="wrapper">
  <div class='section'></div>
  <div class='section before'></div>
  <div class="page-break"></div>
  <div class='section after'></div>
  <div class='section'></div>
  <div class='section before'></div>
  <div class="page-break"></div>
  <div class='section after'></div>
  <div class='section'></div>
</div>