: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 )

/* 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

:first

Exemples

CSS

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

p {
  page-break-after: always;
}

HTML

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

JavaScript

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

Spécification État Commentaires
CSS Paged Media Module Level 3
La définition de ':first' dans cette spécification.
Version de travail Aucune modification.
CSS Level 2 (Revision 1)
La définition de ':first' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi