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

/* 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();
};

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 AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
First page pseudo-class (:first)Chrome Support complet 18Edge Support complet 12Firefox Aucun support NonIE Support complet 8Opera Support complet 9.2Safari Support complet 6WebView Android Support complet 4.4Chrome Android Support complet 18Firefox Android Aucun support NonOpera Android Support complet 10.1Safari iOS Support complet 6Samsung Internet Android Support complet Oui

Légende

Support complet  
Support complet
Aucun support  
Aucun support

Voir aussi