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

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
First page pseudo-class (:first)Chrome ? Edge Support complet OuiFirefox Aucun support NonIE Support complet 8Opera Support complet 9.2Safari ? WebView Android ? Chrome Android ? Edge Mobile Support complet OuiFirefox Android Aucun support NonOpera Android ? Safari iOS ? Samsung Internet Android ?

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue

Voir aussi

Étiquettes et contributeurs liés au document

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