:first
Baseline
Ampliamente disponible
Esta característica está consolidada y funciona en muchos dispositivos y versiones de navegador. Está disponible en todos los navegadores desde agosto de 2023.
¿Quieres que más navegadores sean compatibles con esta característica? Cuéntanos por qué.
La pseudo-clase :first de CSS, utilizada con la regla-at @page, representa la primera página de un documento impreso.
/* 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
:first {
/* ... */
}
Ejemplo
HTML
<p>Primera página.</p>
<p>Segunda página.</p>
<button>Imprimir!</button>
CSS
@page :first {
margin-left: 50%;
margin-top: 50%;
}
p {
page-break-after: always;
}
JavaScript
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
| Especificación |
|---|
| CSS Paged Media Module Level 3 # first-pseudo |