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.

/* 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").onclick = function(){
  window.print();
};

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

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple ? Oui Non89.2 ?
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple ? ? Oui Non ? ? ?

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, edspeedy, teoli, tregagnon, FredB
Dernière mise à jour par : SphinxKnight,