:first

:first — CSS псевдокласс, который используется с @page правилом для стилизации первой страницы документа при печати. Позволяет задать особые стили только для первой страницы, например, другие отступы или центрирование содержимого.

Стилизуем первую страницу при печати, центрируя содержимое:

        
          
          @page :first {    margin-left: 50%;    margin-top: 50%;}p {    page-break-after: always;}
          @page :first {
    margin-left: 50%;
    margin-top: 50%;
}

p {
    page-break-after: always;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          <div class="page">  <h2>Первая страница</h2>  <p>Это первая страница документа. При печати она будет иметь особые отступы: левый отступ 50% и верхний отступ 50%.</p></div><div class="page">  <h2>Вторая страница</h2>  <p>Это вторая страница. Она будет напечатана с обычными отступами, так как псевдокласс :first применяется только к первой странице.</p></div><div class="page">  <h2>Третья страница</h2>  <p>И третья страница также будет напечатана с обычными отступами.</p></div><button onclick="window.print()">Напечатать страничку</button>
          <div class="page">
  <h2>Первая страница</h2>
  <p>Это первая страница документа. При печати она будет иметь особые отступы: левый отступ 50% и верхний отступ 50%.</p>
</div>

<div class="page">
  <h2>Вторая страница</h2>
  <p>Это вторая страница. Она будет напечатана с обычными отступами, так как псевдокласс :first применяется только к первой странице.</p>
</div>

<div class="page">
  <h2>Третья страница</h2>
  <p>И третья страница также будет напечатана с обычными отступами.</p>
</div>

<button onclick="window.print()">Напечатать страничку</button>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Псевдокласс :first используется только с @page правилом:

        
          
          @page :first {    /* стили для первой страницы */    margin-left: 50%;    margin-top: 50%;}
          @page :first {
    /* стили для первой страницы */
    margin-left: 50%;
    margin-top: 50%;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

:first работает только в контексте печати и применяется к первой странице документа. Это полезно, когда нужно:

• Центрировать содержимое первой страницы
• Задать особые отступы для титульной страницы
• Создать уникальный макет для первой страницы

В этом псевдоклассе можно изменять только ограниченный набор свойств:

• Внешние отступы (margin)
• orphans и widows
• Разбитие документа на страницы
• При этом для отступов можно использовать только абсолютные единицы измерения

💡 :first работает только в контексте @page правил.

💡 Можно изменять только отступы, orphans, widows и разбитие на страницы.

💡 Для отступов используйте px, pt, cm, mm, но не проценты или em.

💡 Используйте предварительный просмотр печати в браузере для проверки результата.

💡 :first хорошо работает вместе с :left и :right для создания сложных макетов печати.