:first

La pseudo-classe :first, liée à la règle @ @page décrit la mise en forme de la première page lors de l'impression d'un document. ( voir :first-child pour le premier élément d'un noeud )

css
/* Cible le contenu de la première page */
/* lorsqu'on imprime */
@page :first {
  margin-left: 50%;
  margin-top: 50%;
}

Seul un sous-ensemble restreint de propriétés peut être modifié via cette pseudo-classe :

  • Les propriétés liées aux marges : margin
  • Les propriétés liées aux lignes veuves et orphelines : orphans et widows
  • Les propriétés liées aux sauts de page : page-break

De plus, seules les unités absolues peuvent être utilisées pour les marges.

Syntaxe

Error: could not find syntax for this item

Exemples

CSS

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

p {
  page-break-after: always;
}

HTML

html
<p>Première page.</p>
<p>Deuxième page.</p>
<button>Imprimer</button>

JavaScript

js
document.querySelector("button").addEventListener("click", () => {
  window.print();
});

Appuyez sur le bouton "Imprimer!" pour imprimer l'exemple. Les mots sur la première page doivent être quelque part autour du centre, tandis que les autres pages auront leur contenu à la position par défaut.

Spécifications

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

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi