doka-guide · DrakesBot12 · Jun 11, 2026 · Jul 14, 2026 · Jul 17, 2026 · Jul 17, 2026
@@ -0,0 +1,183 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <title>Демонстрация стилизации первой страницы при печати с помощью @page :first — :first — Дока</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap">
+  <style>
+    *, *::before, *::after {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    html {
+      color-scheme: dark;
+    }
+
+    body {
+      min-height: 100vh;
+      padding: 50px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: #18191C;
+      color: #FFFFFF;
+      font-family: "Roboto", sans-serif;
+    }
+
+    h1 {
+      margin-bottom: 17px;
+      font-weight: 500;
+      font-size: 1.625rem;
+    }
+
+    p {
+      margin: 7px 0;
+      font-size: 1rem;
+      line-height: 1.4;
+    }
+
+    .pages {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin-top: 30px;
+      background-color: #FFFFFF;
+      color: #333;
+      padding: 20px;
+      border-radius: 6px;
+    }
+
+    .page {
+      width: 100%;
+      border: 1px solid #E0E0E0;
+      padding: 15px;
+      margin-bottom: 15px;
+      background: #FAFAFA;
+    }
+
+    .page:first-child {
+      border-color: #2E9AFF;
+      background: #E3F2FD;
+    }
+
+    .page:first-child::before {
+      content: "Первая страница (:first)";
+      display: block;
+      background: #2E9AFF;
+      color: white;
+      padding: 4px 8px;
+      border-radius: 4px;
+      font-size: 12px;
+      font-weight: 500;
+      margin-bottom: 10px;
+      width: fit-content;
+    }
+
+    .page:not(:first-child)::before {
+      content: "Обычная страница";
+      display: block;
+      background: #9E9E9E;
+      color: white;
+      padding: 4px 8px;
+      border-radius: 4px;
+      font-size: 12px;
+      font-weight: 500;
+      margin-bottom: 10px;
+      width: fit-content;
+    }
+
+    .page h2 {
+      font-size: 1.125rem;
+      margin-bottom: 10px;
+      color: #333;
+    }
+
+    .page p {
+      font-size: 0.875rem;
+      line-height: 1.4;
+      margin-bottom: 8px;
+      color: #666;
+    }
+
+    @page {
+        width: 100%;
+    }
+
+    @media (max-width: 768px) {
+      body {
+        padding: 30px;
+      }
+
+      .container {
+        width: 100%;
+        padding: 55px 30px;
+      }
+    }
+
+    /* Стили для печати */
+    @page :first {
+      margin-left: 50%;
+      margin-top: 50%;
+    }
+
+    @media print {
+      body {
+        background: white;
+        color: black;
+        padding: 0;
+      }
+
+      .container {
+        background: white;
+        padding: 20px;
+      }
+
+      .pages {
+        background: white;
+        border: 1px solid #ccc;
+      }
+
+      .page {
+        page-break-after: always;
+        border: 1px solid #ccc;
+        background: white;
+      }
+
+      .page:last-child {
+        page-break-after: auto;
+      }
+    }
+
+    button {
+        padding: 10px 20px;
+        cursor: pointer;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="pages">
+      <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>
+  </div>
+</body>
+</html>
@@ -0,0 +1,99 @@
+---
+title: "`:first`"
+description: "CSS псевдокласс для стилизации первой страницы документа при печати. Используется с @page правилом."
+baseline:
+  - group: page-selectors
+    features:
+      - css.selectors.first
+authors:
+  - drakesbot12
+keywords:
+  - first
+  - псевдокласс
+  - печать
+  - page
+  - первая страница
+  - print styles
+related:
+  - css/page
+  - css/left
+  - css/right
+tags:
+  - doka
+---
+
+## Кратко
+
+`:first` — CSS псевдокласс, который используется с [`@page`](/css/page/) правилом для стилизации первой страницы документа при печати. Позволяет задать особые стили только для первой страницы, например, другие отступы или центрирование содержимого.
+
+## Пример
+
+Стилизуем первую страницу при печати, центрируя содержимое:
+
+```css
+@page :first {
+  margin-left: 50%;
+  margin-top: 50%;
+}
+
+p {
+  page-break-after: always;
+}
+```
+
+```html
+<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>
+```
+
+<iframe title="Демонстрация стилизации первой страницы при печати с помощью @page :first" src="demos/basic/" height="650"></iframe>
+
+## Как пишется
+
+Псевдокласс `:first` используется **только** с `@page` правилом:
+
+```css
+@page :first {
+  /* стили для первой страницы */
+  margin-left: 50%;
+  margin-top: 50%;
+}
+```
+
+## Как понять
+
+`:first` работает только в контексте печати и применяется к первой странице документа. Это полезно, когда нужно:
+
+- Центрировать содержимое первой страницы
+- Задать особые отступы для титульной страницы
+- Создать уникальный макет для первой страницы
+
+## Особенности
+
+В этом псевдоклассе можно изменять только ограниченный набор свойств:
+- Внешние отступы ([`margin`](/css/margin/))
+- [`orphans`](/css/orphans/) и [`widows`](/css/widows/)
+- Разбитие документа на страницы
+- При этом для отступов можно использовать только абсолютные единицы измерения
+
+## Подсказки
+
+💡 `:first` работает только в контексте [`@page`](/css/page/) правил.
+💡 Можно изменять только отступы, [`orphans`](/css/orphans/), [`widows`](/css/widows/) и разбитие на страницы.
+💡 Для отступов используйте `px`, `pt`, `cm`, `mm`, но не проценты или `em`.
+💡 Используйте предварительный просмотр печати в браузере для проверки результата.
+💡 `:first` хорошо работает вместе с `:left` и `:right` для создания сложных макетов печати.
@@ -55,6 +55,7 @@ groups:
       - lang
       - root
       - indeterminate
+      - first
   - name: 'Псевдоэлементы'
     items:
       - pseudoelements
-Original file line number
+Diff line change
@@ Expand Up / @@ -55,6 +55,7 @@ groups: @@
           - lang
           - root
           - indeterminate
+          - first
       - name: 'Псевдоэлементы'
         items:
           - pseudoelements
@@ Expand Down @@