:first

La pseudo-clase :first de CSS, utilizada con la regla-at @page, representa la primera página de un documento impreso.

css
/* Selecciona la primera página al imprimir */
@page :first {
  margin-left: 50%;
  margin-top: 50%;
}

Nota: No puede cambiar todas las propiedades de CSS con esta pseudoclase. Solo puede cambiar los márgenes, orphans, widows y saltos de página del documento. Además, solo puede usar unidades de longitud absoluta al definir los márgenes. Todas las otras propiedades serán ignoradas.

Sintaxis

Error: could not find syntax for this item

Ejemplo

HTML

html
<p>Primera página.</p>
<p>Segunda página.</p>
<button>Imprimir!</button>

CSS

css
@page :first {
  margin-left: 50%;
  margin-top: 50%;
}

p {
  page-break-after: always;
}

JavaScript

js
document.querySelector("button").onclick = function () {
  window.print();
};

Resultado

Presione el botón "Imprimir!" para imprimir el ejemplo. Las palabras en la primera página deben estar en algún lugar del centro, mientras que otras páginas tendrán sus contenidos en la posición predeterminada.

Especificaciones

Specification
CSS Paged Media Module Level 3
# left-right-first

Compatibilidad con navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
First page pseudo-class (:first)

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Ver también