: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

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

Voir aussi